.main-slider img{ width: 100%;}
.main-slider img.mobile-show { display: none;}
.main-slider img.pc-show { display:block;}

.prev-arrow{ background-color: transparent; padding: 0; width: 70px; height: 70px; border: none; position: absolute;  left: 0; bottom: 45%; cursor: pointer; z-index: 1;}
.next-arrow{ background-color: transparent; padding: 0; width: 70px; height: 70px; border: none; position: absolute; right: 0; bottom: 45%; cursor: pointer; z-index: 1;}
.slide-arrow{ opacity: .6;}
.slide-arrow:hover{ opacity: 1;}
.slide-arrow svg{ transform: scale(1.5);}
ul.slick-dots { position: absolute; bottom: 5%; right: 2%; width: auto; margin: 0 auto; padding: 0; text-align: center; z-index: 1;}
ul.slick-dots li{ display: inline-block; border-radius: 50%; padding: 0 5px;}
ul.slick-dots button{ background: rgb(0 0 0 / 30%); width: 14px; height: 14px; padding: 4px; border-radius: 100%; border: none; font-size: 0;}
ul.slick-dots button:active{ border: none;}
ul.slick-dots .slick-active button{ background: var(--white); opacity: 1;}

.slick-slider{ position: relative; display: block; -webkit-user-select: none; -moz-user-select: none; -ms-user-select:none; user-select: none; -webkit-touch-callout: none; -khtml-user-select:none;-ms-touch-action:pan-y;touch-action:pan-y;-webkit-tap-highlight-color:transparent}
.slick-list{ position: relative; display:block; overflow:hidden; margin:0; padding:0;}
.slick-list:focus{ outline:none;}
.slick-list.dragging{ cursor:hand;}
.slick-slider .slick-track,.slick-slider .slick-list{ -webkit-transform:translate3d(0,0,0); -ms-transform:translate3d(0,0,0); transform:translate3d(0,0,0)}
.slick-track{ position: relative; top:0; left:0; display:block;}
.slick-track:before,.slick-track:after{ display:table; content:''}
.slick-track:after{ clear:both;}
.slick-loading .slick-track{ visibility:hidden;}
.slick-slide{ display: none; float:left /* If RTL Make This Right */ ; height:100%; min-height:1px; z-index: -1;}
.slick-slide.dragging img{ pointer-events: none;}
.slick-initialized .slick-slide{ display: block; width: 100%;}
.slick-loading .slick-slide { visibility: hidden;}
.slick-vertical .slick-slide { display:block; height:auto; border:1px solid transparent;}
.slick-track{ display: flex !important; align-items: center; justify-content: center;}
.slick-slide{ display: flex!important; height: inherit !important;}
.main-slider .slick-slide img { object-fit: cover; /* be aware that this doesn't work on IE */ height: 100%; width: 100%;}
.main-slider img.mobile-show { display: none;}
.main-slider img.pc-show { display:block;}


section.top { margin-top: -80px;}
.title-wrap{ padding-top: 80px; text-align: center;}
.target-area h1 { margin-bottom: 30px; font-size: 4.8rem; font-weight: 700; }
.title-wrap h2{ font-size: 4.8rem; font-weight: 700;}
.title-wrap h3{ font-size: 3rem; color: var(--gray); line-height: 1.8; margin-bottom: 15px;}
.title-wrap p{ font-size: 1.8rem; color: var(--gray);}
.target-area img{ width: 100%; height: auto; max-width: 431px; float: right;}
.target-area .list{ position: relative; max-width: 1200px; margin: 0 auto; list-style-type: none; display: flex; padding: 37px; margin-bottom: 0; margin-top: -80px; background: var(--primary); color: var(--white); text-align: center;}
.target-area .list:after{ position: absolute; content: ""; bottom: -20px; left: 0; right: 0;  margin: auto; width: 0; height: 0; border-style: solid; border-width: 20px 20px 0 20px; border-color: var(--primary) transparent transparent transparent;}
.target-area .list li{ flex: 1 1 0;}
.target-area .list li:not(:first-child){ border-left: 1px solid var(--white);}
.target-area .list li p{ position: relative; font-size: 3.6rem; font-weight: 700;}
.target-area .list li p:after{ content: ""; position: absolute; bottom: -10px; right: calc(100%/2.5); width: 20%; height: 2px; background: var(--white);}
.target-area .list li span{ display: block; padding:10px 10px 0; font-size: 1.6rem;}
.target-area .content{ padding: 3% 5% 4%; background: var(--white); box-shadow: 0 5px 14px rgb(0 0 0 / 10%);}
.target-area .txt > p:first-child{ position: relative; margin-bottom: 20px; padding-bottom: 25px; font-size: 3.6rem;}
.target-area .txt > p:first-child:after{ content: ""; position: absolute; left: 0; bottom: 0; width: 30%; height: 2px; background: var(--dark);}
.target-area .txt .t-red{ font-size: 2.4rem; font-weight: 700; font-style: italic; line-height: 1; }
.target-area .txt .t-red span{ font-size: 3.6rem;}
.target-area .txt .t-red svg{ vertical-align: bottom;}
.target-area .txt > p:nth-child(4),.target-area .txt > p:nth-child(5){ font-size: 3rem; font-weight: 700;}
.target-area .txt .circle-style{ position: relative; margin-left: 10px; margin-right: 20px; color: var(--white); z-index: 1;}
.target-area .txt .circle-style:after{ content: ""; position: absolute; top: -1px; left: -10px; width: 50px; height: 50px; border-radius: 50%; background: var(--primary); z-index: -1;}

.exclusive-area img{ display: block; max-width: 757px; width: 100%; height: auto; margin: 20px auto 40px;}
.features{ padding: 50px 0 60px; background: var(--blue); color: var(--white);}
.features-item{ text-align: center;}
.features-item p{ font-size: 1.8rem;}
.fact-num{ font-size: 6rem; font-weight: 700;}

.test-bar{ padding: 20px; margin: 25px 0 30px; background: var(--primary); text-align: center; }
.test-bar p{ display: inline-block; margin-bottom: 0; font-size: 3rem; font-weight: 700; color: var(--white); vertical-align: sub;}
.test-bar svg{ width: 12px; height: 12px; vertical-align: initial;}
.test-area { z-index: 1;}
.test-area .circle-style{ padding: 32px 35px; margin-right: 10px; width: 120px; height: 120px; border-radius: 50%; font-size: 4.8rem; font-weight: 700; color: var(--white); line-height: 1;}
.content-dot,.content-surface { display: flex;}
.content-dot > div{ vertical-align: top; margin-top:30px; margin-left: 20px;}
.content-dot .circle-style{ background: var(--dark);}
.content-surface .circle-style{ background: var(--orange);}
.test-area .wrap{ max-width:1000px; margin: 0 auto; padding-bottom: 70px;}
.test-area h6{ display: inline-block; text-align: left; font-size: 2.4rem; font-weight: 700;}
.book{ display: flex; margin: 40px 0 10px; align-items: baseline;}
.book p,.book span{ font-size: 1.6rem;}
.book img{ max-width: 150px; width: 100%; height: auto; margin-bottom: 10px}
.content-surface > div{vertical-align: top; margin-top: 30px; margin-left: 15px;}
.content-surface .book{ flex-direction: column; align-items: center;}
.test-area .arrow-icon-wrap svg{ margin-top: 30px; width: 54px; height: 54px;}

.video .container,.video .title-wrap { max-width: 840px; width: 100%; margin: 0 auto;}
.video .wrap{ position: relative; background: var(--blue); text-align: left; z-index: -1;}
.video .title-wrap{ padding: 40px 0; text-align: left;}
.video .wrap:before{ content: ""; position: absolute; top:-1px; right: 0; width: 0; height: 0; border-style: solid; z-index: -1; border-width: 0 19vw 18vw 0;  border-color: transparent var(--orange) transparent transparent;}
.video .wrap:after{ content: ""; position: absolute; top:-18vw; right: 0;  width: 0; height: 0; border-style: solid; border-width:0 0 18vw 19vw ; border-color:  transparent transparent var(--orange) transparent;}
.video .title-wrap > div{ display: inline-block; width: 80%; color: var(--white);}
.video .title-wrap p{ margin-top: 0; font-size: 4.8rem; font-weight: 700; color: var(--white);}
.video .title-wrap p:nth-child(2){ font-size: 3rem; font-weight: 500;}
.video .wrap svg{ max-width: 80px; width: 19%; height: 80px; vertical-align: top; animation: updown 1s ease infinite; }
@keyframes updown {
    0% { transform: translateY(-20%); }
    50% { transform: translateY(20%);}
    100% { transform: translateY(-20%);}
}
/* -- YOUTUBE ----*/
.video_area{ position: relative; width: 100%;}
.video_area .container{display: flex;flex-wrap:wrap  }
.video_area::before { content: ""; position: absolute;  left: 0; bottom: 0px; width: 100%; height: calc(63%); background-color: #fff; z-index: 0;}
.video_area .title-wrap{ position: relative; width: 42%; padding-top: 130px; margin: 0 auto;}
.video_area .title-wrap::before{ content: ""; position: absolute; top:0; bottom: 0; right: 0; left: 0; margin: 0 auto 0; max-width:393px; width: 100%; height: 123px; background: url('../img/change.png') no-repeat; background-size: contain;}
.yt-wrapper { width: 100%; max-width: 840px; vertical-align: top;}
.youtube { background-color: #000; position: relative; padding-top: 56.25%; overflow: hidden; cursor: pointer;}
/* .youtube img { width: 100%; top: -16.82%; left: 0; opacity: 0.7;} */
.youtube img { width: 100%; top: 0%; left: 0; opacity: 0.7;}
.youtube .play-button { width: 90px; height: 60px; background-color: #333; box-shadow: 0 0 30px rgba( 0,0,0,0.6 ); z-index: 1; opacity: 0.8; border-radius: 6px;}
.youtube .play-button:before { content: ""; border-style: solid; border-width: 15px 0 15px 26.0px; border-color: transparent transparent transparent #fff;}
.youtube img,.youtube .play-button { cursor: pointer;}
.youtube img,.youtube iframe,.youtube .play-button,.youtube .play-button:before { position: absolute;}
.youtube .play-button,.youtube .play-button:before { top: 50%; left: 50%; transform: translate3d( -50%, -50%, 0 );}
.youtube iframe {height: 100%; width: 100%; top: 0; left: 0;}
.video .yt-wrapper{ margin-top: -30px;}

.student-share-wrap{ background: var(--orange); color: var(--white); }
.student-share-wrap .container{ padding: 70px 0 60px;}
.student-share-slider .photo img{ display: block; width: 100%; height: auto; max-width: 215px; margin: 20px auto;}
.student-share-slider h4{ margin-left: 6%; margin-top: 30px; margin-bottom: 30px; font-size: 3.6rem; font-weight: 700;}
.student-share-slider .txt{ position: relative; padding-right: 8%;}
.student-share-slider .txt:before{ content: "\201C"; position: absolute; top: -80px; right: 96%; font-size: 18rem; font-weight: 400;}
.student-share-slider .txt p{ margin-left:6%; font-size: 2rem; line-height: 1.7;}
.student-share-slider ul.slick-dots{ right:53%;}



@media (max-width: 1440px){
    .title-wrap h2, h3,.reservation .left-content h2,.target-area h1{ font-size: 4rem;}
    .title-wrap h4{ font-size: 2.4rem;}
    .target-area .list li p{ font-size: 3rem;}
    .target-area .list{ padding: 25px 0; margin-top: -40px;}
}
@media (max-width: 1199px){
    .target-area .list{ margin-top: 0;}
}

@media (max-width: 960px){
    .target-area .txt > p:first-child{ font-size: 3rem;}
    .target-area .txt > p:nth-child(4), .target-area .txt > p:nth-child(5){ font-size: 2.4rem;}
    .target-area .txt .circle-style:after { left: -9px; width: 42px; height: 42px;}
    .main-slider img.mobile-show { display: block;}
    .main-slider img.pc-show { display:none;}    
    .target-area .list li span{ font-size: 1.6rem; padding: 10px 10px 0;}
    .content-dot, .content-surface{ max-width: 450px;  margin: 0 auto;}
    .arrow-icon-wrap{ max-width: 450px;  margin: 0 auto 20px;}
    .exclusive-area img{ padding: 0 30px;}
    .test-area .circle-style{ width: 80px; height: 80px; padding: 20px 22px; font-size: 3.6rem;}
    .content-surface .book img{ max-width: 130px;}
    .content-dot > div,.content-surface > div { margin-top: 10px;}
    .student-share-slider .photo img{ max-width: 160px; margin-top: 0;}
    .student-share-slider h6{ margin-top: 20px; margin-bottom: 20px; font-size: 3rem;}
    .student-share-slider .txt p{ font-size: 1.6rem;}
    .student-share-slider ul.slick-dots { left: 0; right: 0; bottom: -10%;}

}
@media screen and (max-width: 768px){
    .target-area .list li p { font-size: 2.4rem;}
    .target-area .content { padding: 8% 5% 4%;}
    .target-area img{ float: none; margin-top: 20px;}
    .test-area .arrow-icon-wrap svg { margin-left: 15px; margin-bottom: 10px; transform: rotate(90deg); }
    .content-dot > div { max-width: 540px; margin: 0 auto; text-align: left; } 
    .content-surface > div{ margin-top: 0; text-align: left; }
    .content-surface .book{ align-items: flex-start; }
    .student-share-slider .txt { width: 96%; margin: 0 auto; }
    .student-share-slider ul.slick-dots { position: static; }
    .student-share-slider .txt:before{ right: 80%; font-size: 16rem;}
    .student-share-slider h6{ margin-left: 25%;}
    .student-share-slider .txt p { margin-left: 25%; }
    .slick-track{ align-items: start;}
}

@media screen and (max-width: 576px){
    .fact-num { font-size: 5rem;}
    .title-wrap h2, h3,.reservation .left-content h2,.target-area h1,.video .title-wrap p,.student-share-slider h4{ font-size: 3.2rem;}
    .student-share-slider h4{ margin-left:12%; margin-bottom:20px; padding-top:20px; font-size: 3rem;}
    .student-share-slider .txt p { margin-left: 10%; }
    .title-wrap h3{ line-height: 1.5;}
    .target-area .txt > p:first-child{ font-size: 2.8rem;}
    .test-area h6,.title-wrap h4{ font-size: 2rem;}
    .title-wrap p{ font-size: 1.6rem;}
    
    .content-dot > div,.content-surface > div{ margin-left: 10px;}
    .test-area .circle-style { width: 60px; height: 60px; padding: 13px 15px;}
    .social-area{ justify-content: left;}

}
@media screen and (max-width: 480px){
    .target-area .list li p { font-size: 2rem; }
    .target-area .list li span{ font-size: 1.2rem;}
    .target-area .txt > p:first-child{ font-size: 2.6rem;}
    .test-area .circle-style{ font-size: 3rem;}
    .student-share-slider .txt:before { font-size: 14rem;}
    .reservation .checkbox-area label{ width: 89%; vertical-align: top; font-size: 1.2rem; text-align: left;}
}
@media screen and (max-width: 414px){
    .target-area .list { margin-top: -30px;}
}

@media screen and (max-width: 320px){
    .reservation .form-infor p { width: 73%;}
    .sitemap-list ul:nth-child(2){ margin-left: 0!important;}

}