@charset "UTF-8";
/***********************************
* 00トップページ共通	*
***********************************/
/* リセット --------------------*/
h2,
h3,
ul,
p{
	margin: 0;
	padding: 0;
}
/* 背景 --------------------*/
/* lesson-block の重なり*/
#lesson-block{
	position: relative;
	z-index: 1;
}
	@media only screen and ( max-width : 767px ){
		#lesson-block{
			top:-30px;
		}
		#onlinelesson-block{
			top:-60px;
		}
	}
	@media print, screen and (min-width: 768px) {
		#lesson-block{
			top:-50px;
		}
		#onlinelesson-block{
			top:-100px;
		}
	}
	@media (min-width: 992px) {
		#lesson-block{
			top:-70px;
		}
		#onlinelesson-block{
			top:-140px;
		}
	}
	@media (min-width: 1200px) {
	}
/* bg-gray-01*/
.bg-gray-01{
	background-image: url(../img/common/bg_gray.png);
	background-repeat: repeat;
}
.bg-gray-top img,
.bg-gray-bottom img{
	width: 100%;
}
.bg-gray-top{
	text-align: right;
}
.bg-gray-bottom{
	text-align: left;
}
	@media only screen and ( max-width : 767px ){
	}
	@media print, screen and (min-width: 768px) {
	}
	@media (min-width: 992px) {
	}
	@media (min-width: 1200px) {
	}
/* concept*/
#concept-block{
	background-image: url(../img/top/concept_bg.jpg);
	background-repeat: no-repeat;
	background-position: bottom;
	background-size: 100%;
	position: relative;
}
	@media only screen and ( max-width : 767px ){
	}
	@media print, screen and (min-width: 768px) {
	}
	@media (min-width: 992px) {
	}
	@media (min-width: 1200px) {
	}
/* online,onlineshop*/
#onlinelesson-block{
	background-image: url(../img/top/onlinelesson_bg.jpg);
	background-position: right top;
}
#onlineshop-block{
	background-image: url(../img/top/onlineshop_bg.jpg);
}
#onlinelesson-block,
#onlineshop-block{
	background-repeat: no-repeat;
	background-size: cover;
}
	@media only screen and ( max-width : 767px ){
	}
	@media print, screen and (min-width: 768px) {
	}
	@media (min-width: 992px) {
		#onlinelesson-block{
			background-position: right bottom;
		}
	}
	@media (min-width: 1200px) {
	}
/* h2,p --------------------*/
/* h2-box　共通 */
#informaiton-block .h2-box,
#concept-block .h2-box,
#lesson-block .h2-box,
#aboutus-block .h2-box,
#calendar-block .h2-box{
}
#informaiton-block .h2-box h2,
#concept-block .h2-box h2,
#lesson-block .h2-box h2,
#aboutus-block .h2-box h2,
#calendar-block .h2-box h2{
	text-align: center;
}
#informaiton-block .h2-box p,
#concept-block .h2-box p,
#lesson-block .h2-box p,
#aboutus-block .h2-box p,
#calendar-block .h2-box p{
	font-family: 'Noto Serif JP', serif;
	text-align: center;
}
	@media only screen and ( max-width : 767px ){
		#informaiton-block .h2-box,
		#concept-block .h2-box,
		#lesson-block .h2-box,
		#aboutus-block .h2-box,
		#calendar-block .h2-box{
			margin-bottom: 28px;
		}
		#informaiton-block .h2-box h2,
		#concept-block .h2-box h2,
		#lesson-block .h2-box h2,
		#aboutus-block .h2-box h2,
		#calendar-block .h2-box h2{
			margin-bottom: 16px;
		}
		#informaiton-block .h2-box h2 img,
		#concept-block .h2-box h2 img,
		#lesson-block .h2-box h2 img,
		#aboutus-block .h2-box h2 img,
		#calendar-block .h2-box h2 img{
			height: 18px;
		}
		#informaiton-block .h2-box p,
		#concept-block .h2-box p,
		#lesson-block .h2-box p,
		#aboutus-block .h2-box p,
		#calendar-block .h2-box p{
			font-size:0.81rem;
		}
	}
	@media print, screen and (min-width: 768px) {
		#informaiton-block .h2-box,
		#concept-block .h2-box,
		#lesson-block .h2-box,
		#aboutus-block .h2-box,
		#calendar-block .h2-box{
			margin-bottom: 56px;
		}
		#informaiton-block .h2-box h2,
		#concept-block .h2-box h2,
		#lesson-block .h2-box h2,
		#aboutus-block .h2-box h2,
		#calendar-block .h2-box h2{
			margin-bottom: 31px;
		}
		#informaiton-block .h2-box h2 img,
		#concept-block .h2-box h2 img,
		#lesson-block .h2-box h2 img,
		#aboutus-block .h2-box h2 img,
		#calendar-block .h2-box h2 img{
			height: 25px;
		}
		#informaiton-block .h2-box p,
		#concept-block .h2-box p,
		#lesson-block .h2-box p,
		#aboutus-block .h2-box p,
		#calendar-block .h2-box p{
			font-size:0.88rem;
		}
	}
	@media (min-width: 992px) {
		#informaiton-block .h2-box h2 img,
		#concept-block .h2-box h2 img,
		#lesson-block .h2-box h2 img,
		#aboutus-block .h2-box h2 img,
		#calendar-block .h2-box h2 img{
			height: auto;
		}
	}
	@media (min-width: 1200px) {
	}
/* onlinelesson-block,onlineshop-block　共通*/

/* 小見出し*/
	@media only screen and ( max-width : 767px ){
	}
	@media print, screen and (min-width: 768px) {
	}
	@media (min-width: 992px) {
	}
	@media (min-width: 1200px) {
	}
/* a --------------------*/
#informaiton-block a,
#concept-block a,
#aboutus-block a,
#calendar-block a{
	color:#262322;
	font-family: 'Noto Serif JP', serif;
	text-decoration: none;

}
/* btn-com-01 */
a.btn-com-01{
	display: inline-block;
	border-radius: 5px;
	background-color: #FFFF00;
	color:#262322;
	text-decoration: none;
	position: relative;
}
a.btn-com-01 span::before{
	content: '';/*何も入れない*/
  display: inline-block;/*忘れずに！*/
  background-image: url(../img/common/btn_arrow.png);
	background-repeat: no-repeat;
  background-size: contain;
	background-position: left;
  vertical-align: middle;
}
a.btn-com-01 span.contact_icon::before{
	display: none;
}
a.btn-com-01 span.contact_icon{
	position: absolute;
	right:0;
}
a.btn-com-01:hover{
	opacity: 0.5; filter: alpha(opacity=50); -moz-opacity: 0.5;
}
	@media only screen and ( max-width : 767px ){
		a.btn-com-01{
			font-size: 12px;
			line-height: 1.1;
			padding-top: 8px;
			padding-bottom: 7px;
			padding-left: 18px;
			padding-right: 18px;
		}
		a.btn-com-01 span::before{
			width: 15px;/*画像の幅*/
		  height: 16px;/*画像の高さ*/
		}
		a.btn-com-01 span.contact_icon{
			width: 37px;
			top:-5px;
		}
		.calendar-btn a.btn-com-01{
			padding-left: 70px;
			padding-right: 70px;
		}
	}
	@media print, screen and (min-width: 768px) {
		a.btn-com-01{
			font-size: 15px;
			line-height: 1.1;
			padding-top: 10px;
			padding-bottom: 9px;
			padding-left: 28px;
			padding-right: 28px;
		}
		a.btn-com-01 span::before{
			width: 18px;/*画像の幅*/
		  height: 21px;/*画像の高さ*/
		}
		a.btn-com-01 span.contact_icon{
			width: 42px;
			top:-5px;
		}
		.calendar-btn a.btn-com-01{
			padding-left: 90px;
			padding-right: 90px;
		}
	}
	@media (min-width: 992px) {
		.calendar-btn a.btn-com-01{
			padding-left: 110px;
			padding-right: 110px;
		}
	}

/***********************************
* 01 ichach	*
***********************************/
#ichach-block{
	position: relative;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
}
	@media only screen and ( max-width : 767px ){
		#ichach-block{
			margin-bottom: 20px;
		}
	}
	@media print, screen and (min-width: 768px) {
		#ichach-block{
			margin-bottom: 20px;
		}
	}
	@media (min-width: 992px) {
		#ichach-block{
			margin-bottom: 50px;
		}
	}
	@media (min-width: 1200px) {
		#ichach-block{
			max-width: 1400px;
		}
	}

/* swiper.js　デザインカスタム --------------------*/
/* ページネーション全体のスタイル */
.swiper-pagination-bullet {
	border-radius: 0%;
	background-color:#c0c0c0;
	opacity: 0.8;
}
/* ページネーション現在のスライドのスタイル */
.swiper-pagination-bullet-active {
	background-color: #797979;
	transition:.3s;
}

	@media only screen and ( max-width : 767px ){
		.swiper-container {
			padding-bottom: 30px;		/* ページネーションの余白50pxを下に取る */
		}
		.swiper-pagination{
			text-align: center;
			padding-right:5px;
		}
		.swiper-pagination-bullet {
			width: 23px;
			height: 3px;
		}
	}
	@media print, screen and (min-width: 768px) {
		.swiper-container {
			padding-bottom: 40px;		/* ページネーションの余白50pxを下に取る */
		}
		.swiper-pagination{
			text-align: right;
			padding-right:4%;
		}
		.swiper-pagination-bullet {
			width: 38px;
			height: 4px;
		}
	}
	@media (min-width: 992px) {
		.swiper-container {
			padding-bottom: 50px;		/* ページネーションの余白50pxを下に取る */
		}
		.swiper-pagination{
			padding-right:4%;
		}
	}
	@media (min-width: 1200px) {
		.swiper-pagination{
			padding-right:10%;
		}
	}
/* 小見出し*/
/* スライド画像のサイズ --------------------*/
img.object-fit-img{
	width: 100%;
	object-fit: cover;
  object-position: bottom right;
  font-family: 'object-fit: cover; object-position: bottom right;'
}
	@media only screen and ( max-width : 767px ){
		img.object-fit-img{
			min-height: 200px;
		}
	}
	@media print, screen and (min-width: 768px) {
	}
	@media (min-width: 992px) {
	}
	@media (min-width: 1200px) {
		img.object-fit-img{
			max-height: 560px;
		}
	}

/* ichach-bnr --------------------*/

/* 小見出し*/
	@media only screen and ( max-width : 767px ){
		.ichach-bnr{
			text-align: center;
			padding-top: 10px;
			padding-bottom: 10px;
		}
		.ichach-bnr img{
			width: 60%;
			max-width: 286px;
		}
	}
	@media print, screen and (min-width: 768px) {
		.ichach-bnr{
			position: absolute;
			z-index: 9;
			bottom:5px;
			left: 3%;
		}
		.ichach-bnr img{
			width: 256px;
			box-shadow: 0 0 10px #333;
		}
		.ichach-bnr a img{　transition:.3s;}
		.ichach-bnr a:hover img{transform: scale(1.05, 1.05); transition:.3s;}
	}
	@media (min-width: 992px) {
		.ichach-bnr{
			bottom:15px;
			left: 3%;
		}
		.ichach-bnr img{
			width: 286px;
		}
	}
	@media (min-width: 1200px) {
		.ichach-bnr{
			bottom:5px;
			left: 10%;
		}
		.ichach-bnr img{
			width: 356px;
		}
	}
/* 小見出し*/
/* ポップアップ */
.popup-cont {
  position: relative;
  background: #FFF;
  padding: 20px;
  width: 90%;
  max-width: 900px;
  margin: 20px auto;
}

/***********************************
* 02 informaiton	*
***********************************/
#informaiton-block a:hover{
	opacity: 0.5; filter: alpha(opacity=50); -moz-opacity: 0.5;
	transition:.3s;
}

	@media only screen and ( max-width : 767px ){
		#informaiton-block{
			margin-bottom: 50px;
			padding-top: 10px;
			padding-bottom: 20px;
		}
	}
	@media print, screen and (min-width: 768px) {
		#informaiton-block{
			margin-bottom: 112px;
			padding-top: 20px;
			padding-bottom: 52px;
		}
	}
	@media (min-width: 992px) {
		#informaiton-block{
			margin-bottom: 142px;
		}
	}
	@media (min-width: 1200px) {
	}
/* h2-box　個別 --------------------*/
#informaiton-block .h2-box{
	background-image: url(../img/top/infomation_bg-01.png);
	background-repeat: no-repeat;
	background-position: top center;
}
	@media only screen and ( max-width : 767px ){
		#informaiton-block .h2-box{
			background-size: 120px;
		}
		#informaiton-block .h2-box h2{
			padding-top: 24px;
		}
	}
	@media print, screen and (min-width: 768px) {
		#informaiton-block .h2-box h2{
			padding-top: 49px;
		}
	}
	@media (min-width: 992px) {

	}
	@media (min-width: 1200px) {
	}
/* infection-control-btn --------------------*/
.infection-control-btn p{
	text-align: center;
}
.infection-control-btn a{
	display: inline-block;
	border:solid #262322 1px;
	border-radius:5px;
}
.infection-control-btn a span::before{
	content: '';/*何も入れない*/
  display: inline-block;/*忘れずに！*/
  background-image: url(../img/common/btn_arrow.png);
	background-repeat: no-repeat;
  background-size: contain;
	background-position: left;
  vertical-align: middle;
}
	@media only screen and ( max-width : 767px ){
		.infection-control-btn a{
			font-size: 12px;
			line-height: 1.1;
			padding-top: 8px;
			padding-bottom: 7px;
			width: 150px;
		}
		.infection-control-btn a span::before{
			width: 15px;/*画像の幅*/
		  height: 16px;/*画像の高さ*/
		}
	}
	@media print, screen and (min-width: 768px) {
		.infection-control-btn{
			margin-top: 55px;
		}
		.infection-control-btn a{
			font-size: 12px;
			line-height: 1.1;
			padding-top: 8px;
			padding-bottom: 7px;
			width: 150px;
		}
		.infection-control-btn a span::before{
			width: 15px;/*画像の幅*/
		  height: 16px;/*画像の高さ*/
		}
	}
	@media (min-width: 992px) {
		.infection-control-btn{
			margin-top: 50px;
		}
		.infection-control-btn a{
			font-size: 15px;
			line-height: 1.1;
			padding-top: 10px;
			padding-bottom: 7px;
			width: 193px;
		}
		.infection-control-btn a span::before{
			width: 18px;/*画像の幅*/
		  height: 21px;/*画像の高さ*/
		}
	}
	@media (min-width: 1200px) {
	}
/* information-sns-list --------------------*/
ul.information-sns-list{
	display: flex;
}
ul.information-sns-list li{
	width: 23px;
	margin: 0 5px;
}
	@media only screen and ( max-width : 767px ){
		ul.information-sns-list{
			ustify-content:flex-end;
		}
		ul.information-sns-list{
			/* margin-left: 10px;*/
			margin-top: 5px;
		}
	}
	@media print, screen and (min-width: 768px) {
		ul.information-sns-list{
			justify-content:flex-end;
			margin-top: 60px;
		}
	}
	@media (min-width: 992px) {
		ul.information-sns-list{
			margin-top: 65px;
		}
	}
	@media (min-width: 1200px) {
	}

/* sp-linklist --------------------*/
	@media only screen and ( max-width : 767px ){
		.sp-linklist{
			display: flex;
			justify-content: center;
			margin-top: -10px;
			margin-bottom: 22px;
		}
	}
	@media print, screen and (min-width: 768px) {
		.sp-linklist{
			display: none;
		}
	}
/* informaition-list --------------------*/
.informaition-list dl{
	border-bottom: solid #929292 1px;
	margin: 0;
}
.informaition-list dl dt,
.informaition-list dl dd{

	border-top: solid #929292 1px;
}
.informaition-list dl dt{
	float: left;
	clear: left;
	text-align: center;
}
#informaiton-block .informaition-list a{
	font-family: "Noto Sans Japanese", "Meiryo UI", "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
#informaiton-block .informaition-list a:hover{
	border-bottom: solid #262322 1px;
	transition:.3s;
}
.informaition-list dl dd span.category-01,
.informaition-list dl dd span.category-02,
.informaition-list dl dd span.category-03{
	color:#fff;
	font-size: 0.56rem;
	display: inline-block;
	width: 4rem;
	text-align: center;
	margin-right: 10px;
}
.informaition-list dl dd span.category-01{
	background-color:#9E89B6;
}
.informaition-list dl dd span.category-02{
	background-color:#9E89B6;
}
.informaition-list dl dd span.category-03{
	background-color:#9E89B6;
}

	@media only screen and ( max-width : 767px ){
		.informaition-list dl dt,
		.informaition-list dl dd{
			font-size: 0.75rem;
			padding-top: 15px;
			padding-bottom: 15px;
		}
		.informaition-list dl dt{
			width: 70px;
		}
		.informaition-list dl dd{
			margin-left: 70px;
			padding-right: 15px;
		}
	}
	@media print, screen and (min-width: 768px) {
		.informaition-list dl dt,
		.informaition-list dl dd{
			font-size: 0.81rem;
			padding-top: 21px;
			padding-bottom: 21px;
		}
		.informaition-list dl dt{
			width: 80px;
		}
		.informaition-list dl dd{
			margin-left: 80px;
			padding-right: 21px;
		}
	}
	@media (min-width: 992px) {
		.informaition-list{
			width: 98%;
			margin-left: auto;
			margin-right: auto;
		}
	}
	@media (min-width: 1200px) {
		.informaition-list{
			width: 94%;
		}
	}
/* information-btn --------------------*/
.information-btn{
	text-align: right;
}
	@media only screen and ( max-width : 767px ){
		.information-btn{
			padding-top: 15px;
			padding-right: 15px;
		}
	}
	@media print, screen and (min-width: 768px) {
		.information-btn{
			padding-top: 31px;
			padding-right: 31px;
		}
	}
	@media (min-width: 992px) {

	}
	@media (min-width: 1200px) {
		.information-btn{
			padding-right: 62px;
		}

	}


/***********************************
* 03 concept	*
***********************************/
/* h2-box　個別 --------------------*/
#concept-block .h2-box{
	background-image: url(../img/top/concept_bg-01.png);
	background-repeat: no-repeat;
	background-position: top right;
	margin-left: auto;
	margin-right: auto;
}
	@media only screen and ( max-width : 767px ){
		#concept-block .h2-box{
			max-width: 340px;
			background-size: contain;
		}
		#concept-block .h2-box h2{
			padding-top: 0px;
		}
	}
	@media print, screen and (min-width: 768px) {
		#concept-block .h2-box{
			width: 376px;
			background-size: 80px;
		}
		#concept-block .h2-box h2{
			padding-top: 14px;
		}
	}
	@media (min-width: 992px) {
	}
	@media (min-width: 1200px) {
	}
/* コンセプト中身 --------------------*/

/* concept-lead-line*/
.concept-lead-line{
	display: flex;
}
.concept-lead{
	text-align: center;
	width: 28%;
}
.concept-pic-01{
	text-align: right;
	width: 72%;
}
.concept-pic-01 img{
	width: 100%;
	object-fit: cover;/*画像トリミング */
	object-position: 0 0;/*トリミング位置　左上 横の位置 縦の位置 ; */
	font-family: 'object-fit: cover; object-position: top left;'
}
	@media only screen and ( max-width : 767px ){
		.concept-lead{
			text-align: center;
		}
		.concept-lead img{
			max-width: 50px;
		}
		.concept-pic-01{
			padding-top: 10px;
		}
		.concept-pic-01 img{
			height: 170px;
		}
	}
	@media print, screen and (min-width: 768px) {
		.concept-lead{
			text-align: center;
		}
		.concept-lead img{
			width: 72px;
		}
	}
	@media (min-width: 992px) {
		.concept-lead img{
			width: auto;
		}
		.concept-pic-01 img{
			height: 446px;
		}
	}
	@media (min-width: 1200px) {
		.concept-lead img{
			padding-left: 20%;
		}
	}
/* concept-txt-line-01, 02*/
.concept-txt-line-01 .concept-txtbox,
.concept-txt-line-02 .concept-txtbox{
	font-family: 'Noto Serif JP', serif;

}
.concept-txt-line-01{
	display: flex;
}
.concept-txt-line-02{
	position: relative;
}


	@media only screen and ( max-width : 767px ){
		.concept-txt-line-01 .concept-txtbox,
		.concept-txt-line-02 .concept-txtbox{
			line-height: 2.0;
			font-size: 12px;
		}
		.concept-txt-line-01 .concept-txtbox{
			padding-left: 25px;
			padding-right: 15px;
			padding-top: 20px;
		}
		.concept-txt-line-01 .concept-txtbox p{
			margin-bottom: 16px;
		}
		.concept-pic-02{
			width: 40%;
			min-width: 150px;
			padding-top: 20px;
		}
		.concept-txt-line-02 .concept-txtbox{
			display: table;
			margin-left: auto;
			margin-right: auto;
			padding-top: 20px;
		}
		.concept-pic-03{
			width: 80%;
			min-width: 240px;
			margin-left: auto;
			margin-right: auto;
		}
	}
	@media print, screen and (min-width: 768px) {
		.concept-txt-line-01 .concept-txtbox,
		.concept-txt-line-02 .concept-txtbox{
			line-height: 2.3;
			font-size: 14px;
		}
		.concept-txt-line-01 .concept-txtbox{
			padding-left: 64px;
			padding-top: 70px;
		}
		.concept-txt-line-01 .concept-txtbox p{
			margin-bottom: 20px;
		}
		.concept-pic-02{
			width: 33%;
			padding-top: 20px;
		}
		.concept-txt-line-02 .concept-txtbox{
			padding-left: 30px;
			padding-top: 80px;
		}
		.concept-pic-03{
			position: absolute;
			width: 257px;
			top:-90px;
			right:-20px;
		}
	}
	@media (min-width: 992px) {
		.concept-txt-line-01 .concept-txtbox,
		.concept-txt-line-02 .concept-txtbox{
			font-size: 17px;
			line-height: 2.5;
		}
		.concept-txt-line-01 .concept-txtbox p{
			margin-bottom: 30px;
		}
		.concept-pic-02{
			padding-top: 20px;
		}
		.concept-txt-line-02 .concept-txtbox{
			padding-left: 140px;
			padding-top: 100px;
		}
		.concept-pic-03{
			width: 357px;
			top:-126px;
			right:-30px;
		}
	}
	@media (min-width: 1200px) {
		.concept-txt-line-01 .concept-txtbox{
			padding-left: 10%;
			padding-top: 120px;
		}
		.concept-txt-line-01 .concept-txtbox p{
			margin-bottom: 40px;
		}
		.concept-pic-02 img{
			width: 100%;
			height: 382px;
			object-fit: cover;/*画像トリミング */
			object-position: 0 0;/*トリミング位置　左上 横の位置 縦の位置 ; */
			font-family: 'object-fit: cover; object-position: top left;'
		}
		.concept-txt-line-02 .concept-txtbox{
			padding-left: 10%;
			padding-top: 110px;
		}
		.concept-pic-03{
			width: 40%;
			top:-166px;
			right:-5%;
		}
	}

/* concept-btn --------------------*/
.concept-btn{
	text-align: right;
}
	@media only screen and ( max-width : 767px ){
		.concept-btn{
			padding-top: 16px;
			padding-bottom: 39px;
		}
	}
	@media print, screen and (min-width: 768px) {
		.concept-btn{
			padding-top: 27px;
			padding-bottom: 89px;
		}
	}
	@media (min-width: 992px) {
		.concept-btn{
			padding-top: 47px;
			padding-bottom: 109px;
		}
	}
	@media (min-width: 1200px) {
		.concept-btn{
			padding-top: 67px;
			padding-bottom: 129px;
		}
	}

/***********************************
* 04 lesson	*
***********************************/
	@media print, screen and (min-width: 768px) {
		#lesson-block .disp-01{ display: block;}/*タブレット中型ディスプレイの以下改行　1199px以下*/
	}
	@media (min-width: 992px) {
	}
	@media (min-width: 1200px) {
		#lesson-block .disp-01{ display: none;}
		#lesson-block .disp-02{ display: block;}/*大型ディスプレイのみ改行　1200px以上*/
	}
	#lesson-block .disp-02,
	#lesson-block .disp-01{ display: none;}
/* h2-box　個別 --------------------*/
#lesson-block .h2-box{
	background-image: url(../img/top/lesson_bg-01.png);
	background-repeat: no-repeat;
	background-position: top left;
}
	@media only screen and ( max-width : 767px ){
		#lesson-block .h2-box{
			background-size: 110px;
			padding-top: 25px;
			margin-left: -12px;
			padding-left: 12px;
		}
		#lesson-block .h2-box h2 img{
			height:15px;
		}
	}
	@media print, screen and (min-width: 768px) {
		#lesson-block .h2-box{
			padding-top: 45px;
		}
	}
	@media (min-width: 992px) {
		#lesson-block .h2-box{
			width: 760px;
			margin-left: auto;
			margin-right: auto;
			padding-top: 63px;
		}
	}
	@media (min-width: 1200px) {
	}
/* ul li --------------------*/
#lesson-block a{
	text-decoration: none;
	color:#262322;
}
#lesson-block .lesson-list div span.lesson_title,
#lesson-block .lesson-list div span.lesson_title_sub{
	font-family: 'Noto Serif JP', serif;
	display: block;
	text-align: center;
}
#lesson-block .lesson-list div span.lesson_txt{
	display: table;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}
#lesson-block .lesson-list div img{
	width: 100%;
}


	@media only screen and ( max-width : 767px ){
		#lesson-block .lesson-list div{
			width: 100%;
			max-width:485px;
		}
		#lesson-block .lesson-list div span.lesson_title{
			font-size: 1.25rem;
			text-align: center;
			padding-top:10px;
		}
		#lesson-block .lesson-list div span.lesson_title_sub{
			font-size: 0.63rem;
			text-align: center;
		}
		#lesson-block .lesson-list div span.lesson_txt{
			font-size: 0.75rem;
			padding-top:10px;
			padding-bottom: 50px;
			text-align: left;
			width: 90%;
		}
	}
	@media print, screen and (min-width: 768px) {
		#lesson-block .lesson-list{
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
		}
		#lesson-block .lesson-list div{
			display: inline-block;
			width: 49%;
		}
		#lesson-block .lesson-list div span.lesson_title{
			font-size: 1.5rem;
			padding-top:20px;
		}
		#lesson-block .lesson-list div span.lesson_title_sub{
			font-size: 0.69rem;
			padding-top: 3px;
		}
		#lesson-block .lesson-list div span.lesson_txt{
			font-size: 0.81rem;
			padding-top: 15px;
			padding-bottom: 70px;
		}
	}
	@media (min-width: 992px) {
		#lesson-block .lesson-list{
			justify-content: space-around;
		}
		#lesson-block .lesson-list div{
			max-width: 47%;
		}
		#lesson-block .lesson-list div span.lesson_title{
			font-size: 1.63rem;
			padding-top:25px;
		}
		#lesson-block .lesson-list div span.lesson_title_sub{
			font-size: 0.75rem;
			padding-top: 5px;
		}
		#lesson-block .lesson-list div span.lesson_txt{
			font-size: 0.88rem;
			padding-top: 20px;
			padding-bottom: 100px;
		}
	}
	@media (min-width: 1200px) {
		#lesson-block .lesson-list div{
			max-width: 485px;
		}
		#lesson-block .lesson-list div span.lesson_txt .disp-01{
			display: none;
		}
		#lesson-block .lesson-list div span.lesson_txt .disp-02{
			display: block;
		}
	}

/***********************************
* 05 onlinelesson,06 onlineshop	*
***********************************/
#onlinelesson-block{
	position: relative;
}
	@media only screen and ( max-width : 767px ){
		#onlinelesson-block,
		#onlineshop-block{
			height: 230px;
		}
		#onlineshop-block{
			position: relative;
			top:-10px;
			margin-bottom: 50px;
		}
	}
	@media print, screen and (min-width: 768px) {
		#onlinelesson-block,
		#onlineshop-block{
			height: 300px;
		}
		#onlineshop-block{
			margin-bottom: 112px;
		}
	}
	@media (min-width: 992px) {
		#onlinelesson-block,
		#onlineshop-block{
			height: 400px;
		}
		#onlineshop-block{
			margin-bottom: 142px;
		}
	}
	@media (min-width: 1200px) {
		#onlinelesson-block,
		#onlineshop-block{
			height: 400px;
		}
	}
/* h2,p --------------------*/
#onlinelesson-block h2,
#onlineshop-block h2,
#onlinelesson-block p,
#onlineshop-block p{
	font-family: 'Noto Serif JP', serif;
	color:#fff;
	font-weight: 400;
}
#onlinelesson-block h2 img,
#onlineshop-block h2 img{
	display: block;
}
	@media only screen and ( max-width : 767px ){
		#onlinelesson-block h2 img,
		#onlineshop-block h2 img{
			margin-bottom: 20px;
		}
		#onlinelesson-block h2 img{
			width: 90%;
			max-width:
		}
		#onlineshop-block h2 img{
			width: 80%;
		}
		#onlinelesson-block h2,
		#onlineshop-block h2{
			font-size: 1.13rem;
			margin-bottom: 10px;
			padding-top: 20px;
		}
		#onlineshop-block h2{
			padding-top: 40px;
		}
		#onlinelesson-block p,
		#onlineshop-block p{
			font-size: 0.75rem;
		}
	}
	@media print, screen and (min-width: 768px) {
		#onlinelesson-block h2,
		#onlineshop-block h2{
			font-size: 1.5rem;
			margin-bottom: 20px;
			padding-top: 40px;
		}
		#onlinelesson-block h2 img,
		#onlineshop-block h2 img{
			margin-bottom: 40px;
		}
		#onlinelesson-block p,
		#onlineshop-block p{
			font-size: 0.88rem;
		}
	}
	@media (min-width: 992px) {
		#onlinelesson-block h2,
		#onlineshop-block h2{
			font-size: 1.75rem;
			margin-bottom: 23px;
			padding-top: 50px;
		}
		#onlinelesson-block h2 img,
		#onlineshop-block h2 img{
			margin-bottom: 48px;
		}
		#onlinelesson-block p,
		#onlineshop-block p{
			font-size: 1rem;
		}
	}

/* onlinelesson-block .btn --------------------*/
/* #onlineshop-block .btn --------------------*/
#onlinelesson-block .btn,
#onlineshop-block .btn{
	text-align: right;
}
	@media only screen and ( max-width : 767px ){
		#onlinelesson-block .btn{
			padding-top: 10px;
		}
		#onlineshop-block .btn{
			padding-top: 35px;
		}
	}
	@media print, screen and (min-width: 768px) {
		#onlinelesson-block .btn{
			position: relative;
			top:-20px;
		}
		#onlineshop-block .btn{
			position: relative;
			padding-top: 20px;
		}
	}
	@media (min-width: 992px) {
		#onlinelesson-block .btn{
			top:0;
		}
		#onlineshop-block .btn{
			padding-top: 70px;
		}
	}
	@media (min-width: 1200px) {
		#onlinelesson-block .btn,
		#onlineshop-block .btn{
			right:10%;
		}
	}


/***********************************
* 07 aboutus	*
***********************************/

	@media only screen and ( max-width : 767px ){
		#aboutus-block{
			margin-bottom: 50px;
		}
	}
	@media print, screen and (min-width: 768px) {
		#aboutus-block{
			margin-bottom: 100px;
		}
	}
	@media (min-width: 992px) {
		#aboutus-block{
			margin-bottom: 140px;
		}
	}
	@media (min-width: 1200px) {
	}
/* h2-box　個別 --------------------*/
#aboutus-block .about-block-outline{
	position: relative;
}
#aboutus-block .h2-box{
	background-image: url(../img/top/aboutus-bg-01.png);
	background-repeat: no-repeat;
	background-position: top left;
	position: relative;
	margin-left: auto;
	margin-right: auto;
}
	@media only screen and ( max-width : 767px ){
		#aboutus-block .h2-box{
			width: 95%;
			max-width: 300px;
			background-size: 80px;
			top:-20px;
			margin-bottom: 8px;
		}
		#aboutus-block .h2-box h2{
			padding-top: 30px;
		}
	}
	@media print, screen and (min-width: 768px) {
		#aboutus-block .h2-box{
			width: 460px;
			top:-36px;
			margin-bottom: 20px;
		}
		#aboutus-block .h2-box h2{
			padding-top: 75px;
		}
	}
	@media (min-width: 992px) {
	}
	@media (min-width: 1200px) {
	}
/* ul li --------------------*/
#aboutus-block .aboutus-list div{
	font-family: 'Noto Serif JP', serif;
	text-align: center;
	position: relative;
}
#aboutus-block .aboutus-list div span.aboutus_txt{
	display: inline-block;
}
#aboutus-block .aboutus-list div span.aboutus_icon{
	position: absolute;
	z-index: 13;
}
.a-rollover:hover span.aboutus_icon{ opacity: 1; filter: alpha(opacity=100); -moz-opacity: 1; transition:.3s; }
	@media only screen and ( max-width : 767px ){
		#aboutus-block .aboutus-list{
			padding-bottom: 50px;
		}
		#aboutus-block .aboutus-list div{
			font-size:0.81rem;
			padding-bottom: 25px;
		}
		#aboutus-block .aboutus-list div img{
			width: 220px;
		}
		#aboutus-block .aboutus-list div:last-child{
			padding-bottom: 0;
		}
		#aboutus-block .aboutus-list div span.aboutus_txt{
			padding-top: 5px;
		}
		#aboutus-block .aboutus-list div span.aboutus_icon{
			top:-10px;
			right:10px;
		}
		#aboutus-block .aboutus-list div span.aboutus_icon img{
			width: 65px;
		}
	}
	@media print, screen and (min-width: 768px) {
		#aboutus-block .aboutus-list{
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			padding-bottom: 100px;
			padding-bottom: 50px;
		}
		#aboutus-block .aboutus-list div{
			display: inline-block;
			width: 32%;
			margin-bottom: 50px;
			max-width: 307px;
			font-size:0.88rem;
		}
		#aboutus-block .aboutus-list div img{
			width: 100%;
			max-width: 307px;
		}
		#aboutus-block .aboutus-list div span.aboutus_txt{
			display: inline-block;
			padding-top: 15px;
		}
		#aboutus-block .aboutus-list div span.aboutus_icon{
			top:-15px;
			right:10px;
		}
		#aboutus-block .aboutus-list div span.aboutus_icon img{
			width: 70px;
		}
	}
	@media (min-width: 992px) {
		#aboutus-block .aboutus-list div{
			font-size: 1rem;
		}
		#aboutus-block .aboutus-list div span.aboutus_icon{
			top:-22px;
			right:15px;
		}
		#aboutus-block .aboutus-list div span.aboutus_icon img{
			width: 91px;
		}
	}
	@media (min-width: 1200px) {
		#aboutus-block .aboutus-list{
			justify-content: space-around;
		}
		#aboutus-block .aboutus-list div{
			font-size: 1.13rem;
		}
	}


/***********************************
* 08 calendar	*
***********************************/
	@media only screen and ( max-width : 767px ){
		#calendar-block{
			margin-bottom: 50px;
		}
	}
	@media print, screen and (min-width: 768px) {
		#calendar-block{
			margin-bottom: 100px;
		}
	}
	@media (min-width: 992px) {
	}
	@media (min-width: 1200px) {
	}
/* h2-box　個別 --------------------*/
#calendar-block .h2-box h2{
	background-image: url(../img/top/calendar_bg-01.png);
	background-repeat:no-repeat;
	background-position: top right;
	background-size: contain;
	margin-left: auto;
	margin-right: auto;
}
	@media only screen and ( max-width : 767px ){
		#calendar-block .h2-box h2{
			max-width: 480px;
			padding-top: 5px;
			padding-bottom: 8px;
		}
	}
	@media print, screen and (min-width: 768px) {
		#calendar-block .h2-box h2{
			width: 480px;
			padding-top: 15px;
			padding-bottom: 9px;
		}
	}
	@media (min-width: 992px) {
		#calendar-block .h2-box h2{
			width: 480px;
			padding-top: 20px;
			padding-bottom: 10px;
		}
	}
	@media (min-width: 1200px) {
	}
/* google-calendar --------------------*/
#calendar-block .google-calendar iframe{
	width: 100%;
}
	@media only screen and ( max-width : 767px ){
		#calendar-block .google-calendar iframe{
			height: 500px;
			margin-bottom: 50px;
		}
	}
	@media print, screen and (min-width: 768px) {
		#calendar-block .google-calendar{
			width: 100%;
			margin-bottom: 60px;
		}
		#calendar-block .google-calendar iframe{
			height: 800px;
		}
	}
	@media (min-width: 992px) {
		#calendar-block .google-calendar{
			width: 910px;
			margin-left: auto;
			margin-right: auto;
			margin-bottom: 80px;
		}
	}

/* calendar-btn --------------------*/
.calendar-btn{
	text-align: center;
}
/* calentdar-note-box 20240522追記 --------------------*/
.calentdar-note-box{
	display: block;
	max-width: 600px;
	margin: 20px auto 0 auto;
	border: 1px solid #d5d5d5;
	border-radius: 5px;
	padding: 15px;
}
.calentdar-note-box > h3{
	cursor: pointer !important;
	text-align: center;
	cursor: pointer;
	color: #9E89B6;
	font-size:0.9375rem
}
.calentdar-note-box > h3 > span{
	position: relative;
	padding: 0 20px;
}
.calentdar-note-box > h3 > span:before {
	content: '';
	width: 10px;
	height: 10px;
	border: 0;
	border-bottom: solid 2px #9E89B6;
	border-right: solid 2px #9E89B6;
	transform: rotate(45deg);
	position: absolute;
	top: -4px;
	right: 0;
	bottom: 0;
	margin: auto;
	transition:.3s;
}
.calentdar-note-box > h3.js_accordion_close > span:before{
	transform: rotate(-135deg);
	top: 4px;
}
.calentdar-note-box-inner{
	padding-top: 5px;
}
.calentdar-note-box p{
	text-align: left !important;
	line-height: 1.5;
}
.calentdar-note-box ul li{
	margin-top: 10px;
}
.calentdar-note-box ul li a{
	display: flex;
	height: 40px;
	align-items: center;
	justify-content: center;
	font-size: 0.875rem;
	background-color: #9E89B6;
	border-radius: 5px;
	color: #fff !important;
}
@media print, screen and (min-width: 768px) {
	#calendar-block .google-calendar{
		width: 100%;
		margin-bottom: 60px;
	}
	#calendar-block .google-calendar iframe{
		height: 800px;
	}
}
@media (min-width: 992px) {
	#calendar-block .google-calendar{
		width: 910px;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 80px;
	}
}