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

	header, article {
		max-width: 900px;
		width: 100%;
	}
	.img100 {width: 100%; height: auto;}


/* H style 
-----------------------------------------------------------------------------------*/

	/*.h-03 { /*32 → 26*/
		/*font-size: 1.625rem;
	}
	.h-04 { /* 38 → 32*/
		/*font-size: 1.5em;
	}
	.h-06 { /*54 → 48*/
		/*font-size: 3rem;
	}

/* text style 
-----------------------------------------------------------------------------------*/
	/*.tx-05 { /*21 → 18*/
		/*font-size: 1.125rem;
	}
	.tx-06 { /*24 → 21*/
		/*font-size: 1.3125rem;
	}

/* top page
-------------------------------------------*/
	body {
		background-size: 1800px auto;
		background-position: center -45px;
	}
	.main-visual img {
		width: 487px;
		height: auto;
	}
	.top-lead {
		margin-top: 127px;
		height: 635px;
	}

	.teacher {
		background: url(../../images/teacher-img@2x.png), linear-gradient(180deg, #ffffff 0%, #ffffff 12.8%,#f0f0f0 12.8%,#f0f0f0 85%,#ffffff 99%, #ffffff 100%);
		background-repeat: no-repeat , repeat;
		background-size:1700px auto , auto;
		background-position:  center top 10px, left top;
	}
	.graph-wrapper {
		width: 55%;
	}
	.recoed-wrapper {
		width: 45%;
	}
	.voice {
		background-position: calc(50% - 330px) 40px, calc(50% + 225px) 20px, center bottom;
	}
	.slick-prev, .slick-next {
		width: 20%;
	}
	.slick-next {
		width: 80%;
	}


}

/*--------------------------------------------------------------
768
---------------------------------------------------------------*/
@media screen and (max-width:999px) {

	header, article {
		max-width: 668px;
		width: 100%;
	}
	/*body {
		font-size: 1.125em;
	}*/

	.g-nav {top: 40px;}

/* H style 
-----------------------------------------------------------------------------------*/
	.h-01 {
		font-size: 1rem;
	}
	.h-08 {
		font-size: 1.5rem;
	}
	/*.h-05 { /*42 → 32 */
		/*font-size: 2rem;
	}
	.h-06 { /*54 → 48 → 42*/
		/*font-size: 2.625rem;
	}

/* text style 
-----------------------------------------------------------------------------------*/
	/*.tx-03 { /*14 → 16*/
		/*font-size: 1rem;
	}*/

	.tx-05 { /*21 → 18 */
		font-size: 1.125rem;
	}

	.check li {
		background-size: 38px auto;
		font-size: 1.5em;
		padding-left: 50px;
	}

/* parts style 
-----------------------------------------------------------------------------------*/
/* top page
-------------------------------------------*/
	body {
		background-size: 1500px auto;
		background-position: center 125px;
	}
	.main-visual img {
		width: 429px;
		height: auto;
	}
	.top-lead {
		margin-top: 107px;
		margin-bottom: 75px;
		height: 635px;
	}
	.main-visual {
		right: -50px;
		top: 233px;
	}
	.T-area, .cnts900 {
		width: 668px;
	}
	#course .cnts900 {
		width: 100vw;
		margin-left: calc(50% - 50vw);
		margin-right: calc(50% - 50vw);
	}
	.about-teacher {
		width: 480px;
	}
	.about-teacher p {
		font-size: 0.875em;
		width: 462px;
	}
	.teacher {
		background: url(../../images/teacher-img@2x.png), linear-gradient(180deg, #ffffff 0%, #ffffff 12.8%,#f0f0f0 12.8%,#f0f0f0 61%,#ffffff 99%, #ffffff 100%);
		background-size:1200px auto , auto;
		background-position:  center top 65px, left top;
		background-repeat: no-repeat, no-repeat;
		padding-top: 140px;
	    height: 720px;
	}
	.learning-cycle { 
		padding-top: 95px;
	}
	.cycle-img {
		margin-top: 40px;
		margin-bottom: 120px;
	}
	.hands-on-training li {
		font-size: 1em;
	}
	.record-list li {
		font-size: 1em;
		line-height: 2;
	}
	.graph-wrapper {
		width: 50%;
	}
	.recoed-wrapper {
		width: 50%;
	}
	.bar-label {
		font-size: 1em;
		width: 7em;
	}
	.voice {
		background-position: calc(50% - 220px) 40px, calc(50% + 139px) 20px, center bottom;
	}
	#course {
		margin-top: 130px;
	}
	.js-accordion_title {
		padding-left: 50px;
		padding-right: 50px;
	}
	.js-accordion_title .icon_open {
		margin-right: -10px;
	}

}

/*--------------------------------------------------------------
500
---------------------------------------------------------------*/
@media screen and (max-width:767px) {

	header {
		max-width: 335px;
	}
	 article {
		max-width: 295px;
	}
	.T-area, .cnts900 {
		width: 295px;
	}
	.dp-n-01 {display: block;}
	.img100 {width: 100%; height: auto;}


/* layout 
-----------------------------------------------------------------------------------*/
	.column-2 .w50 {
		width: 100%;
	}
	.column-2 .w50 + .w50 {
		margin-top: 30px;
	}

/* H style 
-----------------------------------------------------------------------------------*/
	.h-03 {
		font-size: 1.3125rem;
		line-height: 1.27;
	}
	.h-04 {
		font-size: 1.3125rem;
		line-height: 1.5;
	}
	.h-07 {
		font-size: 1rem;
		line-height: 1.5;
	}
	.h-08 {
		font-size: 1.125rem;
	}
	/*.h-03 { /*32 → 26 → 18*/
		/*font-size: 1.125rem;
	}
	.h-04 { /* 38 → 32 → 24*/
		/*font-size: 1.5rem;
	}
	.h-05 {
		font-size: 1.5rem;
	}
	.tx-06 { /*24 → 21 → 18*/
		/*font-size: 1.125rem;
	}

/* text style 
-----------------------------------------------------------------------------------*/
	.tx-05 {
		font-size: 1rem;
	}
	.tx-04 { /*18 → 16*/
		font-size: 1rem;
	}
	/*.smp-tx-01 {
		font-size: 0.875em;
	}
/* link 
-----------------------------------------------------------------------------------*/
	.btn {
		font-size: 1em;
	}


/* parts style 
-----------------------------------------------------------------------------------*/
.dp-b-01, .dp-b-02 { display: none; }
.dp-n-01 { display: block; }
.dp-n-02 { display: inline-block; }

/* top page
-------------------------------------------*/
	body {
		background-image: url(../../images/bg_cycle@2x.png);
		background-repeat: no-repeat;
		background-size: 630px auto;
		background-position: center top -5px;
	}
	.g-nav {
		top:20px;
	}
	.top-lead {
		margin-top: 102px;
		margin-bottom: 30px;
		position: relative;
	}
	h1.h-08 {
		font-size: 1em;
	}
	h1 .h-06 {
		font-size: 1.625em;
		line-height: 1.5;
	}
	.check {
		margin-top: 340px;
	}
	.check li {
		font-size:1.1875em ;
		background-size: 32px auto;
		padding-left: 42px;
	}
	.main-visual {
		position: absolute;
		top: 70px;
		left:0;
		right: 0;
		width: 283px;
	}
	.main-visual img {
		width: 100%;
		height: auto;
	}
	.bd-Y::after, .bd-B::after, .bd-G::after, .bd-P::after {
		height: 10px;
	}
	.about-teacher {
		width: 100%;
	}
	.about-teacher p {
		width: 100%;
	}
	.teacher {
		background: url(../../images/teacher-img@2x.png), linear-gradient(180deg, #ffffff 0%, #ffffff 12.8%,#f0f0f0 12.8%,#f0f0f0 61%,#ffffff 99%, #ffffff 100%);
		background-size:1140px auto , auto;
		background-position:  right -225px top 40px, left top;
		background-repeat: no-repeat, no-repeat;
		padding-top: 140px;
	    height: auto;
	}
	.teacher h3 {
		margin-bottom: 150px;
	}
	.teacher ul {
		margin-left: -20px;
		margin-right: -20px;
		column-gap: 10px;
	}
	.lead-more-link {
		color: #3c8cd0;
	}
	.lead-more-link.open {
		display: none;
	}
	.lead-more {
		display: none;
	}
	.learning-cycle {
		background-size: 650px auto;
		background-position: center 80px;
		padding-top: 0;
	}
	.cycle-img img {
		width: 100%;
		height: auto;
	}
	.cycle-img {
		margin-top: 25px;
		margin-bottom: 80px;
	}
	.slider {
		width: 100vw;
		margin: 0 calc(50% - 50vw);
	}
	.slider img {
		width: 100%;
	}

	.hands-on-training {
		column-gap: 5px;
		padding-top: 40px;
	}
	.hands-on-training li {
		width: calc((100% - 10px) / 2);
		font-size: 0.875em;
	}

	.graph-wrapper {
		width: 100%;
		margin-bottom:40px;
	}
	.recoed-wrapper {
		width: 100%;
		margin-bottom:40px;
	}

	.record-list li {
		font-size: 0.875em;
	}
	.recoed-wrapper {
		font-size: 0.875em;
	}


	.card {
		margin: 0 10px;
		padding: 20px 40px;
	}
	.card h3 {
		font-size: 1.25em;
	}
	.card li {
		font-size: 0.875em;
	}
	.slick-prev, .slick-next {
		width: 19%;
	}
	.slick-next {
		width: 89%;
	}
	.slider-card {
		padding-top: 80px;
	}

	#course {
		margin-top: 65px;
	}
	.js-accordion_title {
		display: block;
		padding: 20px 20px;
	}
	.accordion_inner {
		padding: 0 20px 20px;
	}
	h3.accordion_title {
	font-size: 1.5em;
	font-weight: 700;
	text-align: center;
}
	h3.accordion_title span {
		font-size: 1rem;
		line-height: 1.3;
		margin-bottom: 5px;
		display: inline-block;
	}
	.js-accordion_title .icon_open {
		background: url(../../images/icon_open@2x.png) no-repeat center top;
		background-size: 35px auto;
		font-size: 0.875em;
		width: 5em;
		padding-top: 25px;
		margin: 15px auto 0 auto;
	}
	footer { margin-top: 50px ;}


/* margin 
-----------------------------------------------------------------------------------*/
	.mt-04 { margin-top: 40px;}
	.mb-03 { margin-bottom: 30px;}
}