@charset "UTF-8";



/*大型タブレット用*/
@media screen and (min-width: 769px) and (max-width: 1024px) {

	#newsWap {
	    top: 57.03125vw;
	}

}
/*大型タブレット用*/

/*タブレット用*/
@media screen and (max-width: 768px) {

	.bg_star_right,
	.bg_star_left{
		display: none;
	}

	#wrap:before{
		display: none;
		background-image: none;
	}

	/* VISUAL AREA
	------------------------------------------------------------------------------*/

	#new_mainVisual {
	    background-color: #65e7f7;
	}
    #mainVisualInner {
        padding: 25.7vw 0 0;
        min-width: unset;
        background-color: #5bdfef;
    }

    #mainVisualInner #mainLogoInner{
    	width: 100vw;
    	height: 40vw;
        margin-top: 0;
        padding: 0;
    }

    #mainVisualInner img {
	     margin-top: 0; 
         width: 80vw;
	}

	#new_mainVisual .mainSlider_spn{
	    background-color: #5bdfef;
	}

	#new_mainVisual .mainSlider_spn div ss3-force-full-width {
/*	    padding-top: 5vw;*/
	    padding-top: 45vw;
	    /*position: relative;
        left: 50%;
        transform: translateX(-50%) !important;
        width: 150vw !important;*/
	}


	/* INDEX CONTENT
	------------------------------------------------------------------------------*/

	#wappen{
		position: absolute;
		top: 71.6145833vw;
		left: -3.90625vw;
		width: 30.7291667vw;
		height: 30.7291667vw;
		max-width: 236px;
		max-height: 236px;
		z-index: 50;
	}

	#continer {
        width: 100%;
        margin: 0 auto;
        padding: 0;
    }

	.tablet #mainVisualContents #keyvisual .swiper-container{
		width: 100vw;
        padding-top: 45vw;
	}

	.tablet #mainVisualContents #keyvisual .swiper-container .swiper-wrapper{
	    height: 127.604167vw;
	}

	.tablet #mainVisualContents #keyvisual .swiper-container .swiper-wrapper .swiper-slide{
	    width: 100vw !important;
	}

	.areaWap {
		background-color: #65e7f7;
        padding: 20px 0 0 10px;
	}

	.areaWap .areaInner{
	    position: relative;
        top: 0;
        flex-direction: column;
        padding: 0 3px 20px 15px;
        background-image: url(../img/home/top_main_schoolNavi_bg_spn.png);
	}

	.areaWap .areaInner .areaBox {
	    margin: 0 auto;
	}

	.areaWap h3.schoolGuide {
	    margin-right: 0;
	    margin-bottom: 12.109375vw;
/*	    margin-bottom: 22.7864583vw;*/

	}

	.areaWap h3.schoolGuide .jaTitle {
/*	    font-size: 20px;*/
		/* 33px @ 666px increasing to 38px @ 768px */
	    font-size: calc(2.0625rem + ((1vw - 6.66px) * 4.902));
	    /* Note: The calc base value (2.0625rem) MUST be stated in REM to maintain accessibility */
	    /* Where: 4.902 = 100 * font-size_difference / viewport_width_difference */
	    text-align: right;
        display: block;
	}

	.areaWap h3.schoolGuide .enTitle{
/*		font-size: 50px;*/
		/* 90px @ 666px increasing to 103px @ 768px */
		font-size: calc(5.625rem + ((1vw - 6.66px) * 12.7451));
	    /* Note: The calc base value (5.625rem) MUST be stated in REM to maintain accessibility */
	    /* Where: 12.7451 = 100 * font-size_difference / viewport_width_difference */
	}

	#areaTokyo h4,
	#areaKanagawa h4,
	#areaSaitama h4,
	#areaOther h4{
		/* 28px @ 666px increasing to 32px @ 768px */
		font-size: calc(1.75rem + ((1vw - 6.66px) * 3.9216));
	    /* Note: The calc base value (1.75rem) MUST be stated in REM to maintain accessibility */
	    /* Where: 3.9216 = 100 * font-size_difference / viewport_width_difference */
	    margin-right: 30px;
	}

	#areaTokyo ul.sideSchool, 
	#areaKanagawa ul.sideSchool {
	    line-height: 1.7;
	}

	#areaTokyo .sideSchool li a,
	#areaKanagawa .sideSchool li a,
	#areaSaitama .sideSchool li a,
	#areaOther .sideSchool li a{
		/* 28px @ 666px increasing to 32px @ 768px */
		font-size: calc(1.75rem + ((1vw - 6.66px) * 3.9216));
	    /* Note: The calc base value (1.75rem) MUST be stated in REM to maintain accessibility */
	    /* Where: 3.9216 = 100 * font-size_difference / viewport_width_difference */
	}

	#areaTokyo .sideSchool li a:hover, 
	#areaKanagawa .sideSchool li a:hover, 
	#areaSaitama .sideSchool li a:hover, 
	#areaOther .sideSchool li a:hover {
	    text-underline-offset: 2vw;
	}

	/*#areaTokyo .sideSchool li:before, 
	#areaKanagawa .sideSchool li:before, 
	#areaSaitama .sideSchool li:before, 
	#areaOther .sideSchool li:before {
	    width: 4.55729167vw;
	    height: 4.55729167vw;
	}*/

	#areaTokyo .sideSchool li a:before, 
	#areaKanagawa .sideSchool li a:before, 
	#areaSaitama .sideSchool li a:before, 
	#areaOther .sideSchool li a:before {
	    content: "";
	    display: inline-block;
	    background-image: url(../img/home/top_main_schoolNavi_arrow_icon.png);
	    background-size: cover;
	    width: 34px;
	    height: 34px;
	    margin-right: 5px;
	    box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.5);
	    border-radius: 50%;
	}

	#newsWap {
	    position: relative;
	    top: 0;	    
        left: auto;
        transform: none;
        width: 95vw;
        margin: 0 2.5vw;
        z-index: 40;
/*        z-index: 70;*/
	}

	#newsWap .tablet .newsContents {
	    margin: 40px auto 0;
	    flex-direction: column;
	}

	#newsWap .tablet .newsContents .newsTopBox{
		margin-right: 0;
	    padding: 5vw;
	    width: auto;
	}

	#newsWap .tablet .newsContents .newsTopBox h2 {
	    margin: 0;
	    padding: 0;
	    line-height: normal;
	    font-weight: bold;
	}

	#newsWap .newsContents .newsTopBox h2 .enTitle{
/*		font-size:54px;*/
		/* 103px @ 666px increasing to 119px @ 768px */
		font-size: calc(6.4375rem + ((1vw - 6.66px) * 15.6863));
	    /* Note: The calc base value (6.4375rem) MUST be stated in REM to maintain accessibility */
	    /* Where: 15.6863 = 100 * font-size_difference / viewport_width_difference */
	}

	#newsWap .newsContents .newsTopBox h2 .jaTitle{
/*		font-size: 20px;*/
		/* 33px @ 666px increasing to 38px @ 768px */
	    font-size: calc(2.0625rem + ((1vw - 6.66px) * 4.902));
	    /* Note: The calc base value (2.0625rem) MUST be stated in REM to maintain accessibility */
	    /* Where: 4.902 = 100 * font-size_difference / viewport_width_difference */
	}

	#newsWap .newsContents .newsTopBox .viewAllBtn a{
		font-size: 18px;
	}

	#newsWap .tablet .newsContents #keyvisual{
		min-height: 70vw;
	}

	#newsWap .tablet .newsContents #keyvisual .swiper-container {
        /*width: 340px !important;
        overflow: hidden;*/
        width: 85vw !important;
        overflow: hidden;
        margin: 0 5vw;
	}

	#newsWap .tablet .newsContents #newsBox #keyvisual .swiper-pagination-tablet{
	    left: 50%;
	    transform: translateX(-50%);
	    margin-top: 0;
	    display: flex;
	    align-items: center;
        position: absolute;
	    text-align: center;
	    transition: 300ms opacity;
	}

	#newsWap .tablet .newsContents #newsBox #keyvisual .swiper-pagination-tablet .swiper-pagination-bullet{
	    margin: 0 20px;
	    background-color: #25b4c6 !important;
        width: 20px;
	    height: 20px;
	}

	#newsWap .tablet .newsContents #newsBox #keyvisual .swiper-pagination-tablet .swiper-pagination-clickable .swiper-pagination-bullet{
	    
	}

	#newsWap .tablet .newsContents #newsBox #keyvisual .swiper-pagination-tablet .swiper-pagination-bullet-active{
		background-color: #ffe400 !important;
	    width: 25px;
	    height: 25px;	    
	}

	#newsWap .tablet .newsContents #keyvisual .swiper-wrapper {
        max-height: 60vw;
	    min-height: 60vw;
	    height: 60vw;
	}


	#newsWap .tablet .newsContents #newsBox #keyvisual .swiper-wrapper a.swiper-slide{ 
	    width: 100% !important;
        height: auto;
	}

	#newsWap .tablet .newsContents #newsBox #keyvisual .swiper-wrapper div.swiper-slide{ 
	    width: 100% !important;
        height: auto;
	}

	#newsWap .tablet .newsContents #newsBox #keyvisual .swiper-wrapper a.swiper-slide dl{ 
	    width: 100% !important;
        height: 51.1508951vw;
        padding: 5.20833333vw;
	}

	#newsWap .tablet .newsContents #newsBox #keyvisual .swiper-wrapper a.swiper-slide dl dt {
		/* 33px @ 666px increasing to 38px @ 768px */
	    font-size: calc(2.0625rem + ((1vw - 6.66px) * 4.902));
	    /* Note: The calc base value (2.0625rem) MUST be stated in REM to maintain accessibility */
	    /* Where: 4.902 = 100 * font-size_difference / viewport_width_difference */
	}

	#newsWap .tablet .newsContents #newsBox #keyvisual .swiper-wrapper a.swiper-slide dl dt .date{
/*		font-size: 18px;*/
		/* 30px @ 666px increasing to 34px @ 768px */
		font-size: calc(1.875rem + ((1vw - 6.66px) * 3.9216));
	    /* Note: The calc base value (1.875rem) MUST be stated in REM to maintain accessibility */
	    /* Where: 3.9216 = 100 * font-size_difference / viewport_width_difference */
	}

	#newsWap .tablet .newsContents #newsBox #keyvisual .swiper-wrapper a.swiper-slide dl dd.newsBtn{
		position: absolute;
	    bottom: 15px;
	    right: 15px;
	}

	#newsWap .tablet .newsContents #newsBox #keyvisual .swiper-wrapper a.swiper-slide dl dd.externalBtn{
		position: absolute;
	    bottom: 15px;
	    right: 15px;
	}


	#newsWap .tablet .newsContents #newsBox #keyvisual .swiper-wrapper div.swiper-slide dl{ 
	    width: 100% !important;
        height: 51.1508951vw;
        padding: 20px;
	}

	#newsWap .tablet .newsContents #newsBox #keyvisual .swiper-wrapper div.swiper-slide dl dt {
		font-size: 18px;
	}

	#newsWap .tablet .newsContents #newsBox #keyvisual .swiper-wrapper div.swiper-slide dl dt .date{
		font-size: 18px;
	}

	#newsWap .tablet .newsContents #newsBox #keyvisual .swiper-wrapper div.swiper-slide dl dd.newsBtn{
		position: absolute;
	    bottom: 15px;
	    right: 15px;
	}

	#newsWap .tablet .newsContents #newsBox #keyvisual .swiper-wrapper div.swiper-slide dl dd.externalBtn{
		position: absolute;
	    bottom: 15px;
	    right: 15px;
	}

	#newsWap .tablet .newsContents #newsBox dd.newsBtn:after {
	    width: 9.89583333vw;
	    height: 9.89583333vw;
	    margin-left: 30px;
	}

	#newsWap .tablet .newsContents #newsBox dd.externalBtn:after {
	    width: 9.89583333vw;
	    height: 9.89583333vw;
	    margin-left: 30px;
	}

	#newsWap .tablet .newsContents .newsBottomBox h2{
		border: none;
		background: none;
		margin-bottom: 50px;
	}

	#newsWap .tablet .newsContents .newsBottomBox h2 .enTitle{
		color: #fff;
		font-size: 70px;
	}

	#newsWap .tablet .newsContents .newsBottomBox h2 .jaTitle{
		color: #fff;
		font-size: 20px;
	}

	#newsWap .tablet .newsContents .newsBottomBox .viewAllBtn a{
		display: flex;
		justify-content: space-between;
		align-items: center;
		background: #ffe400;
		color: #00b7f3;
		border-radius: 100px;
		padding: 4.55729167vw;
        margin: 0 5vw 5vw;
		text-decoration: none;
/*		font-size: 18px;*/
		/* 40px @ 666px increasing to 46px @ 768px */
	    font-size: calc(2.5rem + ((1vw - 6.66px) * 5.8824));
	    /* Note: The calc base value (2.5rem) MUST be stated in REM to maintain accessibility */
	    /* Where: 5.8824 = 100 * font-size_difference / viewport_width_difference */
	}

	#newsWap .tablet .newsContents .newsBottomBox .viewAllBtn a:hover{
		transition: 1s;
		background: #fff;
	}

	#newsWap .tablet .newsContents .newsBottomBox .viewAllBtn a:after{
		content: "";
		display: inline-block;
		background-image: url(../img/home/top_main_news_viewAll_arrow.png);
		background-size: contain;
		background-repeat: no-repeat;
		width: 9.89583333vw;
		height: 9.89583333vw;
		margin-left: 30px;
	}

	#newsWap .tablet .newsContents .newsBottomBox .viewAllBtn a:hover:after{
		transition: 1s;
		background-image: url(../img/home/top_main_news_viewAll_arrow_hover.png);
	}

	#topLeadWap{
		/*background: rgb(101,231,247);
		background: linear-gradient(180deg, rgba(101,231,247,1) 0%, rgba(23,187,207,1) 40%);*/
		background: rgb(101,231,247);
		background: linear-gradient(180deg, rgba(101,231,247,1) 0%, rgba(101,231,247,1) 15%, rgba(23,187,207,1) 25%);
	}

	#topLeadWap #message {
	    width: 100%;
        height: 338.541667vw;
/*        height: 260vw;*/
	}

	#topLeadWap #message .messageTitle {
	    line-height: 1.3;
        top: 22vw;
        left: 8vw;
	}

	#topLeadWap #message .messageBg{
		position: absolute;
		top: -25vw;
	}

	#topLeadWap #message .messageTitle .enTitle {
        width: auto;
	    font-size: 47px;
	    color: #fff;
	    display: flex;
        justify-content: space-between;
        align-items: center;
	}

	#topLeadWap #message .messageTitle .enTitle .josefin-sans{
        display: block;
        margin-right: 2vw;
	}

	#topLeadWap #message .messageTitle .enTitle:after {
		content: "";
		display: block;
		background-color: #fff;
		height: 2px;
        flex-grow: 1;
	}

	#topLeadWap #message .messageTitle .jaTitle {
	    /* 92px @ 667px increasing to 110px @ 768px */
	    font-size: calc(5.75rem + ((1vw - 6.67px) * 17.8218));
	    /* Note: The calc base value (5.75rem) MUST be stated in REM to maintain accessibility */
	    /* Where: 17.8218 = 100 * font-size_difference / viewport_width_difference */
	    color: #fff;
	    text-shadow: 2px 7px #f06680;
	}

	#topLeadWap #message .messageTitle .jaTitle img {
	    width: 56.90104167vw;
	}

	#topLeadWap #message .messageBox{
		position: absolute;
		top: 185.546875vw;
		bottom: auto;

		#topLeadWap #message .messageTitle .jaTitle img {
	    width: 56.90104167vw;
	}
        left: unset;
        transform: none;
        width: 90vw;
        margin: 0 5.20833333vw;
	}

	#topLeadWap #message .messageBox p{
		/* 33px @ 666px increasing to 38px @ 768px */
	    font-size: calc(2.0625rem + ((1vw - 6.66px) * 4.902));
	    /* Note: The calc base value (2.0625rem) MUST be stated in REM to maintain accessibility */
	    /* Where: 4.902 = 100 * font-size_difference / viewport_width_difference */
	}

	#topLeadWap #message .messageBg img {
	    width: 100vw;
	}

	#topLeadWap #features {
	    width: auto;
	    margin: 0 5.20833333vw;
	    position: relative;
        z-index: 11;
	}

	#topLeadWap #features .featuresTitle {
	    width: 90%;
	    margin: 0 auto 30px;
	}

	#topLeadWap #features .featuresBox {
	    display: flex;
	    justify-content: space-between;
	    flex-direction: column;
	}

	#topLeadWap #features .featuresBox dl {
		width: 100%;
/*        width: calc(100% / 3.2);*/
	    margin: 4.55729167vw auto;
	}

	#topLeadWap #features .featuresBox dl dt {
	    padding: 0;
	    background-color: #16bbcf;
	}

	#topLeadWap #features .featuresBox dl dd {
	    /* 40px @ 666px increasing to 46px @ 768px */
	    font-size: calc(2.5rem + ((1vw - 6.66px) * 5.8824));
	    /* Note: The calc base value (2.5rem) MUST be stated in REM to maintain accessibility */
	    /* Where: 5.8824 = 100 * font-size_difference / viewport_width_difference */
        padding: 9.11458333vw;
	}

	#topLeadWap #features .readMoreBtn {
	    padding-bottom: 100px;
	    width: 100%;
	    margin: 0 auto;
	}

	#topLeadWap #features .readMoreBtn a {
	    width: auto;
	    padding: 7.8125vw;
		margin: 50px auto 0;
		text-decoration: none;
		/* 43px @ 666px increasing to 50px @ 768px */
		font-size: calc(2.6875rem + ((1vw - 6.66px) * 6.8627));
	    /* Note: The calc base value (2.6875rem) MUST be stated in REM to maintain accessibility */
	    /* Where: 6.8627 = 100 * font-size_difference / viewport_width_difference */
        border-radius: 100px;
	}

	#topLeadWap #features .readMoreBtn a:after {
	    width: 9.89583333vw;
	    height: 9.89583333vw;
	    margin-right: 0;
	}

	#movieWap {
	    background-color: #2fc2d4;
	}

	.movieWap {
	    display: flex;
	    justify-content: space-between;
	    flex-direction: column;
	}

	#movieWap .movieWap .movieTitle{
		width: 90%;
        margin: 80px auto 70px;
	}

	#movieWap .movieWap .movieTitle h2{
		margin: 0;
	    height: auto;
	    width: auto;
	}

	#movieWap .movieWap .movieBox {
	    width: 100%;
	}

	#calenderWap {
	    display: flex;
	    justify-content: space-between;
	    background-color: #17bbcf;
	    padding: 100px 0 40px;
	}

	#calenderWap .calenderInner {
	    display: flex;
	    justify-content: space-between;
	    width: auto;
	    margin: 0 auto;
	    flex-direction: column;
	}

	#calenderWap .calenderTitle h2 {
	    width: 90%;
	    height: auto;
	    padding: 0;
	    margin: 0 0 30px;
	    box-sizing: border-box;
	}

	#calenderWap .calenderTitle p {
	    width: 90%;
        margin: 0 0 30px;
	    padding: 0;
	    /* 33px @ 666px increasing to 38px @ 768px */
	    font-size: calc(2.0625rem + ((1vw - 6.66px) * 4.902));
	    /* Note: The calc base value (2.0625rem) MUST be stated in REM to maintain accessibility */
	    /* Where: 4.902 = 100 * font-size_difference / viewport_width_difference */
	}

	#calenderWap .calenderInner .calenderTitle, #calenderWap .calenderBox {
	    width: 100%;
	}

	#calenderWap .calenderInner .calenderBox {
	    display: flex;
	    justify-content: space-between;
/*	    flex-direction: column;*/
	}

	#calenderWap .calenderInner .calenderBox a{
		margin: 0 30px;
	}

	#calenderWap .calenderInner .calenderBox a:last-of-type{
		margin: 0px 30px 0px 0px;
	}

	#calenderWap .calenderInner .calenderBox dl {
        width: auto;
	    margin: 10px auto;
	    position: relative;
	}

	#traialLessonWap {
	    padding-bottom: 80px;
	}

	#traialLessonWap .traialLessonWap .traialLessonContents {
	    position: absolute;
	    z-index: 10;
	    width: 95%;
	    top: 0;
	    right: 50%;
        transform: translateX(50%);
        padding: 50px;
        box-sizing: border-box;
	}

	#traialLessonWap .traialLessonWap .traialLessonTitle h2 {
	    height: auto;
	    border: none;
	    background-image: none;
	    font-size: 78px;
	    color: #fff;
	    text-shadow: 2px 7px #4fc1cf;
	    margin: 0 0 0 0;
	    padding: 0;
	    line-height: 1.5;
	    text-align: center;
	}

	#traialLessonWap .traialLessonWap .traialLessonContents .traialLessonBox p {
        font-size: 32px;
        text-align: center;
        margin: 30px 0 0 0;
	}

	#traialLessonWap .traialLessonWap .traialLessonBtn {
        width: 90%;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: -5.20833333vw;
	}

	#traialLessonWap .traialLessonWap .traialLessonBtn a {
	    /* 34px @ 666px increasing to 40px @ 768px */
	    font-size: calc(2.125rem + ((1vw - 6.66px) * 5.8824));
	    /* Note: The calc base value (2.125rem) MUST be stated in REM to maintain accessibility */
	    /* Where: 5.8824 = 100 * font-size_difference / viewport_width_difference */
	    padding: 4.55729167vw 4.55729167vw 4.55729167vw 4.55729167vw;
	    color: #fff;
	    background-color: #20383f;
	    border-radius: 100px;
	    display: flex;
	    justify-content: space-between;
	    align-items: center;
	    text-decoration: none;
	}

	#traialLessonWap .traialLessonWap .traialLessonBtn a:before {
	    width: 10.0260417vw;
	    height: 7.16145833vw;
	    margin-right: 4.81770833vw;
	    content: "";
	    display: inline-block;
	    background-image: url(../img/common/top_header_mail_icon.png);
	    background-size: contain;
	    background-repeat: no-repeat;
	}

	#traialLessonWap .traialLessonWap .traialLessonBtn a:after {
	    width: 10.0260417vw;
	    height: 10.0260417vw;
	    margin-left: 7.16145833vw;
	    content: "";
	    display: inline-block;
	    background-image: url(../img/common/top_header_mailArrow_icon.png);
	    background-size: contain;
	    background-repeat: no-repeat;
	}

	#contactWap {
	    background-image: url(../img/common/top_insta_contact_bg_spn.png);
	    background-size: cover;
        height: auto;
	}

	#contactWap #contactBox {
	    width: auto;
	    margin: 350px auto 0;
	    padding: 0;
	}

	#contactWap #instagramBox .instagramTitle {
	    width: 18.4895833vw;
	    height: 18.4895833vw;
	    padding-top: 22.7864583vw;
	}

	#contactWap #instagramBox .instagramContents {
	    width: auto;
	    height: auto;
	    margin: 20px 10px 0;
	}

	#contactWap #instagramBox .instagramContents ul {
		display: flex;
		justify-content: center;
	}

	#contactWap #instagramBox .instagramContents ul li a{
	    width: auto;
        border-radius: 15.36px;
	}

	#contactWap #contactBox .contactTitle {
	    width: 70%;
	    padding-top: 200px;
	}

	#contactWap #contactBox .contactContents p {
	    width: 90%;
	    /* 34px @ 666px increasing to 38px @ 768px */
	    font-size: calc(2.125rem + ((1vw - 6.66px) * 3.9216));
	    /* Note: The calc base value (2.125rem) MUST be stated in REM to maintain accessibility */
	    /* Where: 3.9216 = 100 * font-size_difference / viewport_width_difference */
	    margin: 11.71875vw auto 11.0677083vw;
	    padding: 0;
	}

	#contactWap #contactBox .traialLessonBtn {
	    width: 90%;
	}

	#contactWap #contactBox .traialLessonBtn a {
	    /* 34px @ 666px increasing to 38px @ 768px */
	    font-size: calc(2.125rem + ((1vw - 6.66px) * 3.9216));
	    /* Note: The calc base value (2.125rem) MUST be stated in REM to maintain accessibility */
	    /* Where: 3.9216 = 100 * font-size_difference / viewport_width_difference */
        padding: 5.33854167vw 4.6875vw;
        border-radius: 100px;
	}

	#contactWap #contactBox .traialLessonBtn a:before {
	    width: 7.29166667vw;
	    height: 5.33854167vw;
	    margin-right: 3.64583333vw;
        margin-left: 0.651041667vw;
	}

	#contactWap #contactBox .traialLessonBtn a:after {
	    width: 8.59375vw;
	    height: 8.59375vw;
	    margin-left: 3.90625vw;
	}

	#contactWap #contactBox .aboutContact dl {
        flex-direction: column;
        margin: 60px auto 0;
        padding-bottom: 80px;
	    width: 90%;
	}

	#contactWap #contactBox .aboutContact dt {
	    padding: 30px;
	    width: auto;
	    text-align: center;
	    box-sizing: border-box;
	    border-radius: 25px 25px 0 0;
		/* 34px @ 666px increasing to 38px @ 768px */
	    font-size: calc(2.125rem + ((1vw - 6.66px) * 3.9216));
	    /* Note: The calc base value (2.125rem) MUST be stated in REM to maintain accessibility */
	    /* Where: 3.9216 = 100 * font-size_difference / viewport_width_difference */
	}

	#contactWap #contactBox .aboutContact dd {
	    padding: 30px;
	    width: auto;
	    box-sizing: border-box;
	    border-radius: 0 0 25px 25px;
		/* 25px @ 666px increasing to 29px @ 768px */
		font-size: calc(1.5625rem + ((1vw - 6.66px) * 3.9216));
	    /* Note: The calc base value (1.5625rem) MUST be stated in REM to maintain accessibility */
	    /* Where: 3.9216 = 100 * font-size_difference / viewport_width_difference */
	}

	.spn_flex .banner1{
		flex: 1;
	}

	.spn_flex .banner2{
		flex: 1;
	}

}/*タブレット用END*/


@media screen and (min-width: 500px) and (max-width: 665px) {
	#traialLessonWap .traialLessonWap .traialLessonContents .traialLessonBox .traialLessonBtn {
        position: absolute !important;
        bottom: -121.621622vw !important;
        width: 100% !important;
    }

    #traialLessonWap .traialLessonWap .traialLessonContents .traialLessonBox .traialLessonBtn a br.spn{
    	display: block;
    }

    #traialLessonWap .traialLessonWap .traialLessonContents .traialLessonBox .traialLessonBtn a{
	    border-radius: 100px;
    }
}

/*スマホ用END*/
@media screen and (max-width: 665px) {

	.bg_star_right,
	.bg_star_left{
		display: none;
	}

	/* VISUAL AREA
	------------------------------------------------------------------------------*/

	#new_mainVisual {
	    background-color: #65e7f7;
	}
    #mainVisualInner {
        padding: 25.7vw 0 0;
        min-width: unset;
        background-color: #5bdfef;
    }

    #mainVisualInner #mainLogoInner{
    	width: 100vw;
    	height: 40vw;
        margin-top: 6vw;
        padding: 0;
    }

    #mainVisualInner img {
	     margin-top: 0; 
         width: 80vw;
	}


	#new_mainVisual .mainSlider_spn{
	    background-color: #5bdfef;
	}

	#new_mainVisual .mainSlider_spn div ss3-force-full-width {
/*	    padding-top: 5vw;*/
	    padding-top: 45vw;
	    /*position: relative;
        left: 50%;
        transform: translateX(-50%) !important;
        width: 150vw !important;*/
	}


	/* INDEX CONTENT
	------------------------------------------------------------------------------*/

	#wrap:before{
		display: none;
		background-image: none;
	}


	#wappen{
		position: absolute;
		top: 71.6145833vw;
		left: -3.90625vw;
		width: 35vw;
		height: 35vw;
		max-width: 286px;
		max-height: 286px;
		z-index: 40;
	}

	#continer {
        width: 100%;
        margin: 0 auto;
        padding: 0;
    }

	.spn #mainVisualContents #keyvisual .swiper-container{
		width: 100vw;
		padding-top: 46vw;
	}

	.spn #mainVisualContents #keyvisual .swiper-container .swiper-wrapper{
	    height: 127.604167vw;
	}

	.spn #mainVisualContents #keyvisual .swiper-container .swiper-wrapper .swiper-slide{
	    width: 100vw !important;
	}

	.areaWap {
		background-color: #65e7f7;
        padding: 20px 0 0 10px;
	}

	.areaWap .areaInner{
	    position: relative;
        top: 0;
        flex-direction: column
    }

    .areaWap .areaInner .areaBox { 
    	margin: 0 auto;
	}

	.areaWap h3.schoolGuide {
	    margin-right: 0;
	    margin-bottom: 13.98496241vw;
	}

	.areaWap h3.schoolGuide .jaTitle {
	    font-size: 20px;
	}

	.areaWap h3.schoolGuide .enTitle{
		font-size: 50px;
	}

	#areaTokyo h4,
	#areaKanagawa h4,
	#areaSaitama h4,
	#areaOther h4{
		/* 17px @ 400px increasing to 28px @ 665px */
		font-size: calc(1.0625rem + ((1vw - 4px) * 4.1509));
	    /* Note: The calc base value (1.0625rem) MUST be stated in REM to maintain accessibility */
	    /* Where: 4.1509 = 100 * font-size_difference / viewport_width_difference */
		margin-right: 30px;
	}

	#areaTokyo .sideSchool li a,
	#areaKanagawa .sideSchool li a,
	#areaSaitama .sideSchool li a,
	#areaOther .sideSchool li a{
		/* 17px @ 400px increasing to 28px @ 665px */
		font-size: calc(1.0625rem + ((1vw - 4px) * 4.1509));
	    /* Note: The calc base value (1.0625rem) MUST be stated in REM to maintain accessibility */
	    /* Where: 4.1509 = 100 * font-size_difference / viewport_width_difference */
	}


	#areaTokyo .sideSchool li a:before, 
	#areaKanagawa .sideSchool li a:before, 
	#areaSaitama .sideSchool li a:before, 
	#areaOther .sideSchool li a:before {
	    content: "";
	    display: inline-block;
	    background-image: url(../img/home/top_main_schoolNavi_arrow_icon.png);
	    background-size: cover;
	    width: 29px;
	    height: 29px;
	    margin-right: 5px;
	    box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.5);
	    border-radius: 50%;
	}

	#newsWap {
	    position: relative;
	    top: 0;	    
        left: auto;
        transform: none;
        width: 95vw;
        margin: 0 2.5vw;
	}

	#newsWap .spn .newsContents {
	    margin: 40px auto 0;
	    flex-direction: column;
	}

	#newsWap .spn .newsContents .newsTopBox{
		margin-right: 0;
	    padding: 5vw;
	    width: auto;
	}

	#newsWap .spn .newsContents .newsTopBox h2 {
	    margin: 0;
	    padding: 0;
	    line-height: normal;
	    font-weight: bold;
	}

	#newsWap .newsContents .newsTopBox h2 .enTitle{
		font-size:54px;
	}

	#newsWap .newsContents .newsTopBox h2 .jaTitle{
		font-size: 20px;
	}

	#newsWap .newsContents .newsTopBox .viewAllBtn a{
		font-size: 18px;
	}


	#newsWap .spn .newsContents #keyvisual{
		min-height: 70vw;
	}

	#newsWap .spn .newsContents #keyvisual .swiper-container {
        /*width: 340px !important;
        overflow: hidden;*/
        width: 85vw !important;
        overflow: hidden;
        margin: 0 5vw;
	}

	#newsWap .spn .newsContents #newsBox #keyvisual .swiper-pagination{
	    left: 50%;
	    transform: translateX(-50%);
	    margin-top: 0;
	    display: flex;
	    align-items: center;
	}

	#newsWap .spn .newsContents #newsBox #keyvisual .swiper-pagination .swiper-pagination-bullet{
	    margin: 0 15px;
	    background-color: #25b4c6 !important;
	}

	#newsWap .spn .newsContents #newsBox #keyvisual .swiper-pagination .swiper-pagination-clickable .swiper-pagination-bullet{
	    
	}

	#newsWap .spn .newsContents #newsBox #keyvisual .swiper-pagination .swiper-pagination-bullet-active{
		background-color: #ffe400 !important;
	    width: 16px;
	    height: 16px;	    
	}

	#newsWap .spn .newsContents #keyvisual .swiper-wrapper {
        max-height: 60vw;
	    min-height: 60vw;
	    height: 60vw;
	}

	#newsWap .spn .newsContents #newsBox #keyvisual .swiper-wrapper a.swiper-slide{ 
	    width: 100% !important;
        height: auto;
	}


	#newsWap .spn .newsContents #newsBox #keyvisual .swiper-wrapper a.swiper-slide dl{ 
	    width: 100% !important;
        height: 220px;
        padding: 20px;
	}

	#newsWap .spn .newsContents #newsBox #keyvisual .swiper-wrapper a.swiper-slide dl dt {
		font-size: 18px;
	}

	#newsWap .spn .newsContents #newsBox #keyvisual .swiper-wrapper a.swiper-slide dl dt .date{
		font-size: 18px;
	}

	#newsWap .spn .newsContents #newsBox #keyvisual .swiper-wrapper a.swiper-slide dl dd.newsBtn{
		position: absolute;
	    bottom: 15px;
	    right: 15px;
	}

	#newsWap .spn .newsContents #newsBox #keyvisual .swiper-wrapper a.swiper-slide dl dd.externalBtn{
		position: absolute;
	    bottom: 15px;
	    right: 15px;
	}




	#newsWap .spn .newsContents #newsBox #keyvisual .swiper-wrapper div.swiper-slide{ 
	    width: 100% !important;
        height: auto;
	}


	#newsWap .spn .newsContents #newsBox #keyvisual .swiper-wrapper div.swiper-slide dl{ 
	    width: 100% !important;
        height: 220px;
        padding: 20px;
	}

	#newsWap .spn .newsContents #newsBox #keyvisual .swiper-wrapper div.swiper-slide dl dt {
		font-size: 18px;
	}

	#newsWap .spn .newsContents #newsBox #keyvisual .swiper-wrapper div.swiper-slide dl dt .date{
		font-size: 18px;
	}

	#newsWap .spn .newsContents #newsBox #keyvisual .swiper-wrapper div.swiper-slide dl dd.newsBtn{
		position: absolute;
	    bottom: 15px;
	    right: 15px;
	}

	#newsWap .spn .newsContents #newsBox #keyvisual .swiper-wrapper div.swiper-slide dl dd.externalBtn{
		position: absolute;
	    bottom: 15px;
	    right: 15px;
	}


	#newsWap .spn .newsContents #newsBox a.swiper-slide dl dd.newsBtn:after {
	    width: 40px;
	    height: 40px;
	    margin-left: 30px;
	}

	#newsWap .spn .newsContents #newsBox a.swiper-slide dl dd.externalBtn:after {
	    width: 40px;
	    height: 40px;
	    margin-left: 30px;
	}

	#newsWap .spn .newsContents .newsBottomBox h2{
		border: none;
		background: none;
		margin-bottom: 50px;
	}

	#newsWap .spn .newsContents .newsBottomBox h2 .enTitle{
		color: #fff;
		font-size: 70px;
	}

	#newsWap .spn .newsContents .newsBottomBox h2 .jaTitle{
		color: #fff;
		font-size: 20px;
	}

	#newsWap .spn .newsContents .newsBottomBox .viewAllBtn a{
		display: flex;
		justify-content: space-between;
		align-items: center;
		background: #ffe400;
		color: #00b7f3;
		border-radius: 50px;
		padding: 10px 10px 10px 25px;
        margin: 0 5vw 5vw;
		text-decoration: none;
		font-size: 18px;
	}

	#newsWap .spn .newsContents .newsBottomBox .viewAllBtn a:hover{
		transition: 1s;
		background: #fff;
	}

	#newsWap .spn .newsContents .newsBottomBox .viewAllBtn a:after{
		content: "";
		display: inline-block;
		background-image: url(../img/home/top_main_news_viewAll_arrow.png);
		background-size: contain;
		background-repeat: no-repeat;
		width: 40px;
		height: 40px;
		margin-left: 30px;
	}

	#newsWap .spn .newsContents .newsBottomBox .viewAllBtn a:hover:after{
		transition: 1s;
		background-image: url(../img/home/top_main_news_viewAll_arrow_hover.png);
	}

	#topLeadWap{
		/*background: rgb(101,231,247);
		background: linear-gradient(180deg, rgba(101,231,247,1) 0%, rgba(23,187,207,1) 40%);*/
		background: rgb(101,231,247);
		background: linear-gradient(180deg, rgba(101,231,247,1) 0%, rgba(101,231,247,1) 15%, rgba(23,187,207,1) 25%);
	}

	#topLeadWap #message {
	    width: 100%;
        height: 337.837838vw;
	}

	#topLeadWap #message .messageTitle {
	    line-height: 1.3;
        top: 22vw;
        left: 8vw;
	}

	#topLeadWap #message .messageBg{
		position: absolute;
		top: -25vw;
	}

	#topLeadWap #message .messageTitle .enTitle {
	    /* 24px @ 375px increasing to 42px @ 666px */
	    font-size: calc(1.5rem + ((1vw - 3.75px) * 6.1856));
	    /* Note: The calc base value (1.5rem) MUST be stated in REM to maintain accessibility */
	    /* Where: 6.1856 = 100 * font-size_difference / viewport_width_difference */
	    color: #fff;
	    display: flex;
        justify-content: space-between;
        align-items: center;
	}

	#topLeadWap #message .messageTitle .enTitle .josefin-sans{
        display: block;
        margin-right: 2vw;
	}

	#topLeadWap #message .messageTitle .enTitle:after {
		content: "";
		display: block;
		background-color: #fff;
		height: 2px;
        flex-grow: 1;
	}

	#topLeadWap #message .messageTitle .jaTitle {
	    /* 54px @ 375px increasing to 96px @ 666px */
	    font-size: calc(3.375rem + ((1vw - 3.75px) * 14.433));
	    /* Note: The calc base value (3.375rem) MUST be stated in REM to maintain accessibility */
	    /* Where: 14.433 = 100 * font-size_difference / viewport_width_difference */
	    color: #fff;
	    text-shadow: 2px 7px #f06680;
	}

	#topLeadWap #message .messageTitle .jaTitle img {
	    width: 57.14285714vw;
	}

	#topLeadWap #message .messageBox{
		position: absolute;
		top: 185.435435vw;
		bottom: auto;
        left: unset;
        transform: none;
        width: 90vw;
        margin: 0 5vw;
	}

	#topLeadWap #message .messageBox p{
		font-size:20px;
		margin-bottom: 30px;
	}

	#topLeadWap #message .messageBg img {
	    width: 100vw;
	}

	#topLeadWap #features {
	    width: auto;
	    margin: 0 20px;
	}

	#topLeadWap #features {
	    width: auto;
	    margin: 0 20px;
	}

	#topLeadWap #features .featuresTitle {
	    width: 90%;
	    margin: 0 auto 30px;
	}

	#topLeadWap #features .featuresBox {
	    display: flex;
	    justify-content: space-between;
	    flex-direction: column;
	}

	#topLeadWap #features .featuresBox dl {
	    width: 100%;
	    margin: 20px auto;
	}

	#topLeadWap #features .featuresBox dl dt {
	    padding: 0;
	    background-color: #16bbcf;
	}

	#topLeadWap #features .featuresBox dl dd {
	    font-size: 24px;
        padding: 30px;
	}

	#topLeadWap #features .readMoreBtn {
	    padding-bottom: 100px;
	    width: 90%;
	    margin: 0 auto;
	}

	#topLeadWap #features .readMoreBtn a {
	    width: auto;
	    padding: 30px;
		margin: 50px auto 0;
		text-decoration: none;
		font-size: 28px;
	}

	#topLeadWap #features .readMoreBtn a:after {
	    width: 40px;
	    height: 40px;
	    margin-right: 0;
	}

	#movieWap {
	    background-color: #2fc2d4;
	}

	.movieWap {
	    display: flex;
	    justify-content: space-between;
	    flex-direction: column;
	}

	#movieWap .movieWap .movieTitle{
		width: 90%;
        margin: 80px auto 70px;
	}

	#movieWap .movieWap .movieTitle h2{
		margin: 0;
	    height: auto;
	    width: auto;
	}

	#movieWap .movieWap .movieBox {
	    width: 100%;
	}

	#calenderWap {
	    display: flex;
	    justify-content: space-between;
	    background-color: #17bbcf;
	    padding: 100px 0 40px;
	}

	#calenderWap .calenderInner {
	    display: flex;
	    justify-content: space-between;
	    width: auto;
	    margin: 0 auto;
	    flex-direction: column;
	}

	#calenderWap .calenderTitle h2 {
	    width: 90%;
	    height: auto;
	    padding: 0;
	    margin: 0 0 30px;
	    box-sizing: border-box;
	}

	#calenderWap .calenderTitle p {
	    width: 90%;
        margin: 0 0 30px;
	    padding: 0;
	    font-size: 18px;

	}

	#calenderWap .calenderInner .calenderTitle, #calenderWap .calenderBox {
	    width: 100%;
	}

	#calenderWap .calenderInner .calenderBox {
	    display: flex;
	    justify-content: space-between;
	    flex-direction: column;
	}

	#calenderWap .calenderInner .calenderBox dl {
	    width: 90%;
	    margin: 10px auto;
	    position: relative;
	}

	#calenderWap .calenderInner .calenderBox a{
		margin: auto;
	}

	#calenderWap .calenderInner .calenderBox a:last-of-type{
		margin: auto;
	}

	#traialLessonWap {
	    padding-bottom: 80px;
	}

	#traialLessonWap .traialLessonWap .traialLessonContents {
	    position: absolute;
	    z-index: 10;
	    width: 95%;
	    top: 10px;
	    right: 50%;
        transform: translateX(50%);
        padding: 10px;
	}

	#traialLessonWap .traialLessonWap .traialLessonTitle h2 {
	    height: auto;
	    border: none;
	    background-image: none;
	    font-size: 42px;
	    color: #fff;
	    text-shadow: 2px 7px #4fc1cf;
	    margin: 0 0 0 0;
	    padding: 0;
	    line-height: 1.5;
	    text-align: center;
	}

	#traialLessonWap .traialLessonWap .traialLessonContents .traialLessonBox p {
	    font-size: 24px;
	    text-align: center;
        margin: 0;
	}

	#traialLessonWap .traialLessonWap .traialLessonContents .traialLessonBox .traialLessonBtn {
	    position: absolute;
	    bottom: -320px;
	    width: 100%;
	}

	#traialLessonWap .traialLessonWap .traialLessonContents .traialLessonBox .traialLessonBtn a {
        font-size: calc(1.3125rem + ((1vw - 4px) * 4.8872));
        padding: 6.00600601vw 5.105105vw 6.00600601vw 7.95795796vw;
        justify-content: space-between;
        width: 90.234375vw;
        box-sizing: border-box;
        margin: 0 auto;
	}

	#traialLessonWap .traialLessonWap .traialLessonContents .traialLessonBox .traialLessonBtn a:before {
	    width: 10.0600601vw;
	    height: 7.20720721vw;
	    margin-right: 5.105100511vw;
	}

	#traialLessonWap .traialLessonWap .traialLessonBox .traialLessonBtn a:after {
	    width: 10.2102102vw;
	    height: 10.2102102vw;
	    margin-left: 7.20720721vw;
	}

	#contactWap {
	    background-image: url(../img/common/top_insta_contact_bg_spn.png);
	    background-size: cover;
        height: auto;
	}

	#contactWap #contactBox {
	    width: auto;
	    margin: 60px auto 0;
	    padding: 0;
	}

	#contactWap #instagramBox .instagramTitle {
	    width: 60px;
	    height: 60px;
	    padding-top: 100px;
	}

	#contactWap #instagramBox .instagramContents {
	    width: auto;
	    height: auto;
	    margin: 20px 10px 0;
	}

    #contactWap #instagramBox .instagramContents ul li a {
        width: auto;
        border-radius: 13.32px;
    }

	#contactWap #contactBox .contactTitle {
	    width: 70%;
	    padding-top: 210px;
	}

	#contactWap #contactBox .contactContents p {
	    width: 90%;
	    font-size: 20px;
	    margin: 0 auto 60px;
	    padding: 0;
	}

	#contactWap #contactBox .traialLessonBtn {
	    width: 90%;
	}

	#contactWap #contactBox .traialLessonBtn a {
/*	    font-size: 18px;*/
		/* 17.48px @ 390px increasing to 33.21px @ 665px */
		font-size: calc(1.0925rem + ((1vw - 3.9px) * 5.72));
		/* Note: The calc base value (1.0925rem) MUST be stated in REM to maintain accessibility */
		/* Where: 5.72 = 100 * font-size_difference / viewport_width_difference */
/*	    padding: 20px 10px 20px 30px;*/
		padding: 5.26315789vw;
	}

	#contactWap #contactBox .traialLessonBtn a:before {
	    width: 37px;
	    height: 26px;
	    margin-right: 20px;
	}

	#contactWap #contactBox .traialLessonBtn a:after {
	    width: 40px;
	    height: 40px;
	    margin-left: 20px;
	}

	#contactWap #contactBox .aboutContact dl {
        flex-direction: column;
        margin: 60px auto 0;
        padding-bottom: 80px;
	    width: 90%;
	}

	#contactWap #contactBox .aboutContact dt {
	    padding: 30px;
	    width: auto;
	    text-align: center;
	    box-sizing: border-box;
	    border-radius: 25px 25px 0 0;
		font-size: 20px;
	}

	#contactWap #contactBox .aboutContact dd {
	    padding: 30px;
	    width: auto;
	    box-sizing: border-box;
	    border-radius: 0 0 25px 25px;
		font-size: 16px;
	}

	.spn_flex .banner1{
		flex: 1;
	}

	.spn_flex .banner2{
		flex: 1;
	}

}/*スマホ用END*/

/*スマホ用*/


@media screen and (max-width: 430px) {
    #topLeadWap #message {
        width: 100%;
        height: 338.372093vw;
    }

    #topLeadWap #message .messageBox {
        position: absolute;
        top: 186.25vw;
        bottom: auto;
        left: unset;
        transform: none;
        width: 90vw;
        margin: 0 5vw;
    }

    #traialLessonWap .traialLessonWap .traialLessonContents .traialLessonBox .traialLessonBtn {
        bottom: -74.4186047vw;
    }
}

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

	.areaWap h3.schoolGuide {
	    margin-right: 0;
	    margin-bottom: 23.25vw;
	}

	#areaTokyo h4,
	#areaKanagawa h4,
	#areaSaitama h4,
	#areaOther h4{
		/* 14.86px @ 350px increasing to 17px @ 400px */
		font-size: calc(0.92875rem + ((1vw - 3.5px) * 4.28));
	    /* Note: The calc base value (0.92875rem) MUST be stated in REM to maintain accessibility */
	    /* Where: 4.28 = 100 * font-size_difference / viewport_width_difference */
		margin-right: 30px;
	}

	#areaTokyo .sideSchool li a,
	#areaKanagawa .sideSchool li a,
	#areaSaitama .sideSchool li a,
	#areaOther .sideSchool li a{
		/* 14.86px @ 350px increasing to 17px @ 400px */
		font-size: calc(0.92875rem + ((1vw - 3.5px) * 4.28));
	    /* Note: The calc base value (0.92875rem) MUST be stated in REM to maintain accessibility */
	    /* Where: 4.28 = 100 * font-size_difference / viewport_width_difference */
	    font-feature-settings: "palt";
	}

	#areaTokyo .sideSchool li a:before, 
	#areaKanagawa .sideSchool li a:before, 
	#areaSaitama .sideSchool li a:before, 
	#areaOther .sideSchool li a:before {
	    content: "";
	    display: inline-block;
	    background-image: url(../img/home/top_main_schoolNavi_arrow_icon.png);
	    background-size: cover;
	    width: 18px;
	    height: 18px;
	    margin-right: 5px;
	    box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.5);
	    border-radius: 50%;
	}

	#areaTokyo ul.sideSchool, #areaKanagawa ul.sideSchool {
	    margin-bottom: 3.25vw;
	}

    #topLeadWap #message {
        width: 100%;
        height: 338.25vw;
    }	

    #traialLessonWap .traialLessonWap .traialLessonContents .traialLessonBox .traialLessonBtn {
        bottom: -80vw;
    }
}

@media screen and (max-width: 390px) {
    #traialLessonWap .traialLessonWap .traialLessonContents .traialLessonBox .traialLessonBtn {
        bottom: -82.0512821vw;
    }
}


@media screen and (max-width: 320px) {
	/*#content .summer_school_banner img {
	    margin-top: 0;
	}*/
}