@charset "utf-8";
/*==================================================

Main Contents
==================================================*/
main h2{line-height: 2.5em;margin-right: 3.2rem;}
main h2 span {font-size: 4.5em;}
main h2 + p {font-size: 1.4em;font-weight: 600;line-height: 1.7em;padding-top: 10px;}
.side-text{
    position: relative;
}
.side-text::after {
    font-size: 1em;
    writing-mode: vertical-rl;
    position: absolute;
    letter-spacing: 0.14rem;
}
  
/*==================================================

Main View
==================================================*/
.mv{position: relative;background: #f1f1f1;padding: 0 0 0;/* height: 90vh; */}
.mv-wrap{
    position: absolute;
    top: 34%;
    left: 5%;
    z-index: 2;
    display: flex;
    flex-direction: column;
}
.mv .mv-text {
    /*position: absolute;
    top: 34%;
    left: 5%;
    z-index: 2;*/
    display: inline-block;
}
.mv h2 {
    font-size: 2.2em;
    letter-spacing: 1px;
    line-height: 1.5em;
    margin: 0;
    text-shadow: 0px 0px 4px rgba(255, 255, 255, 1);
    font-family: 'Noto Serif JP', serif;
    font-weight: 500;
}
.mv h2 span {
    font-size: 90%;
}
.mv .mv-text p{
    padding-left: 5%;
    position: relative;
    font-size: 18px;
    display: flex;
    align-items: center;
    font-family: 'Hina Mincho', serif;
    font-weight: 500;
}

.mv .mv-text p::before {
    content: '';
    position: relative;
    left: -1rem;
    display: inline-block;
    width: 50px;
    height: 1px;
    background-color: #666666;
    margin-top: 0.4rem;
}

.mv-banner > div a{
    background: #575F5D;
    padding: 13px;
    margin-top: 2em;
    display: inline-block;
    /*position: absolute;
    top: 52%;
    left: 5%;
    z-index: 5;*/
    transform: scale(.9);
    transform-origin: left;
}
.mv-banner > div ul {
    display: grid;
    grid-template-columns: 145px 1fr;
    grid-template-rows: auto auto; 
    gap: 3px;
    text-align: center;
    place-items: center;
}
.mv-banner > div ul li{font-size: 10px;}
.mv-banner .mv-grid1 {
    grid-column: 1;
    grid-row: span 2;
}
.mv-banner .mv-grid2 {
    grid-column: 2;
    grid-row: 1;
    background: #fff;
    padding: 1% 1.5% 0%;
    font-weight: bold;
    white-space: nowrap;
    line-height: 1.6em;
    letter-spacing: 0;
    text-align: center;
    /* margin-top: 7px; */
}
.mv-banner .mv-grid2 i{font-style:normal;color:#333;font-size: inherit;}
.mv-banner .mv-grid3 {
    grid-column: 2;
    grid-row: 2;
    /* font-weight: bold; */
    padding: 0% 0 0;
    color: #fff;
    font-size: 110%;
    line-height: 1.7em;
    position: relative;
    margin: 0 0px;
    text-align: center;
}

.txt_stripe{
    letter-spacing: 3px;
    background-image: repeating-linear-gradient(-45deg,
    #46867a 0, #46867a 2px,
    transparent 2px, transparent 4px
  );
    background-repeat: no-repeat;
    background-position: left bottom;
    background-size: 100% 0.3em;
}

.mv .mv-img {text-align: right;position: relative;}
.mv-img img {border-radius: 40px 0 0;}

.slider {
    position:relative;
}

.mv .slick-slide {height: 80vh;text-align: right;}
.slick-slide img {display: inline;}

/*ドットナビゲーションの設定*/

.slick-dotted.slick-slider {margin-bottom: 0;}
.slick-dots {left: 20%; bottom: 15px;display: flex;width: auto;}

.slick-dots li {margin:0 16%;}
.slick-dots li button:before{
    font-size: 12px;
    color: #fff;
    opacity: 1;
}
.slick-dots li.slick-active button:before
{
    opacity: 1;
    color: #7DB2A4;
}
.mv dl {display: flex;position: absolute; right: 0; bottom: 0; text-align: center;z-index: 5;width: 35vw;}
.mv dt, dd {padding: 15px 20px;align-items: center;display: flex;}
.mv dt {
    font-weight: bold;
    background-color: #83BDAF;
    color: #fff;
    white-space: nowrap;
}
.mv dd {background-color: #fff; padding-right: 4em;flex-grow: 2;}
.mv dd a {display: flex; align-items:center}
.mv dd .headline {margin-left: 20px; text-decoration: underline;}

/*==================================================

course
==================================================*/
.course {
    /* background: rgba(199, 199, 199, 0.1); */
    position: relative;
    display: flex;
    background-image: url('../img/couse-img.jpg');
    background-size: 56%;
    background-repeat: no-repeat;
    background-position: top left;
    background-color: rgba(199, 199, 199, 0.1);
}

.course .course-img {
    position: absolute;
    top: 0;
    left: 0;
}
.course .viewport-l{
    display: flex;
    justify-content: flex-end;
	position: initial;
}
.course .course-text {
    background: #fff;
    width: 80%;
    max-width: 880px;
    padding: 6.35% 6.35% 6.35% 4.4%;
    margin-top: 6em;
    margin-left: auto;
}
.course .side-text::after {
    content: 'Course Introduction';
    right: -3.75%;
    top: 45%;
}
.course-text > p {margin-bottom: 3em;line-height: 2;font-size: 16px;}
.course-text ul {
    display: flex;
    flex-wrap: wrap;
    /* max-width: 735px; */
    margin-bottom: 0;
}

.course-text ul li {
    margin: 0 2% 3% 0;
    width: 23%;
}
.course-text ul li:nth-child(4n) {margin-right: 0;}
.course-text ul li a {display: flex; align-items: center;}

.course-text ul li p {
    border-bottom: 1px solid #333;
    display: inline-block;
    margin-left: 5%;
    font-weight: 600;
    font-size: 95%;
    white-space: nowrap;
}

/*==================================================

Trial Lesson
==================================================*/


.trial {
    position: relative;
    display: flex;
    background-image: url('../img/trial-img.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: top right;
}

.trial .viewport-l {
    z-index: 1;
    height: 660px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
	position: initial;
}

.trial .trial-img {
    position: absolute;
    top: 0;
    right: 0;
}

.trial .trial-text {
    background: #5BB19C;
    width: 80%;
    max-width: 880px;
    padding: 5% 4% 5% 6%;
    z-index: 1;
    margin: 4em 0;
    box-sizing: border-box;
    position: relative;
}

.trial .trial-text::after {
    content: '';
    background: url(../img/bg-trial.png) no-repeat ;
    background-size: contain;
    width: 50%;
    height: 50%;
    position: absolute;
    bottom: 1em;
    left: 1em;
    z-index: -1;
}

.trial-text h2, .trial-text h2 + p {color: #fff;font-weight: 600;}
.trial-text h2 {flex: 0 0 35%;}
.trial-text h2 span {font-size: 4rem;line-height: 0.8em;white-space: nowrap;}
.trial-text > p {margin-bottom: 3em;color: #fff;line-height: 2;font-size: 16px;}

.trial-text .right > a:first-child{margin-right: 1em;}
.trial-text .right {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 5%;
}

.trial .side-text::after {
    content: 'Free Trial Lesson';
    left: -3.125%;
    top: 35%;
}

/*==================================================

Point
==================================================*/


.point {
    background: rgba(199, 199, 199, 0.1);
    padding: 100px 0;
    position: relative;
}

.point::after {
    content: '';
    background: url(../img/bg-point.png) no-repeat ;
    background-size: contain;
    width: 114px;
    height: 260px;
    position: absolute;
    bottom: 3em;
    right: 1em;
}
.point .headline-box{justify-content: center;margin-bottom: 5em;}
.point-box {
    max-width: 1510px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 auto 100px;
}
.point-box .white-btn  {z-index: 2;}
.point > div:nth-child(2) {margin-left: 0;}
.point > div:nth-child(3) {flex-direction: row-reverse; margin-right: 0;}
.point > div:nth-child(4) {margin: 0;}

.point-text {
    display: flex;
    justify-content: space-between;
    align-items: flex-start; 
    margin: 0 2em;
}

.point-text h3 {
    font-size: 1.5em;
    line-height: 1.7;
    font-weight: 600;
}
.point-text > p {
   font-size: 9em;
   color: rgba(131, 189, 175, 0.6);
   margin: 3rem 3rem 0 0;
}
.point-text > div> p {
    line-height: 2;
    max-width: 580px;
    margin: 1.5em 0;
    font-size: 16px;
}


.point-text > img {
    margin-right: 4em;
}



/*==================================================

Flow
==================================================*/

.flow {
    padding: 100px 0;
    position: relative;
}

.flow::after {
    content: '';
    background: url(../img/bg-flow.png) no-repeat ;
    background-size: contain;
    width: 131px;
    height: 144px;
    position: absolute;
    top: 3em;
    right: 20%;
    z-index: -1;
}

.flow .headline-box {padding-bottom: 70px;}

.flow-box {
    display: flex;
    justify-content: space-between;
}
.flow-box .step {width: 20%; position: relative;display: flex;flex-direction: column;gap: 20px;}
.step div > img {margin-bottom: 1em;}
.step-ttl {font-size: 120%; font-weight: bold; height: 2em; display: flex; justify-content: center; align-items: center;color: #5BB19C;}
.step::after {
    content: '';
    background: url(../img/ico-triangle.png) no-repeat;
    background-size: contain;
    width: 20px;
    height: 20px;
    position: absolute;
    top: 26%;
    right: -23%;
    z-index: -1;
}

.step:last-child::after{
    display: none;
}


/*==================================================

Teacher
==================================================*/


.teacher {
    background: #FAFAFA;
    position: relative;
    padding: 100px 0;
}
.teacher .headline-box {flex-direction: column;align-items: center;text-align: center;}
.teacher h2{margin: 0;}
.teacher .teacher-grid {
    display: flex;
    justify-content: center;
    margin-bottom: 2em;
}

.grid-item {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
}
.teacher .side-text::after {
    content: 'Instructor Introduction';
    right: -3.75%;
    top: 50%;
}

.teacher .teacher-grid img{max-width:327px;width: 100%;}
/*==================================================

info-blog
==================================================*/

.info-blog {
    background-image: url('../img/info-blog-bg.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: bottom right;
    background-color: #f7f7f7;
    padding: 90px 0 103px;
}

.info-blog .side-text::after {
    content: 'Information & Blog';
    left: -7.3%;
    top: 30%;
}

.info-blog-box {
    display: flex;
    justify-content: space-between;
    max-width: 1100px;
    box-sizing: border-box;
    margin: 0 auto;
}

.info-blog-box >div {
    width: 45%;
}

.info-blog h3 {
    line-height: 2.5em;
}
.info-blog h3 span {
    font-size: 3em;
    padding-right: 5%;
    font-family: 'Hina Mincho';
    font-weight: normal;
}

.info-blog ul {
    list-style: none;
    padding: 0;
    margin: 1em 0 2em;
  }

.info-blog ul li {
    border-bottom: 1.5px dashed #ddd;
    padding: 10px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.info-blog .headline {margin-left: 20px;}



/*==================================================

column
==================================================*/

.column .viewport-l {
    padding: 90px 0 80px;
    display: flex;
    justify-content: space-between;
}

.column .viewport-l >div:first-child {
    position: relative;
    width: 20%;
}

.column h2 {margin-right: 0;}

.column-box {
    display: flex;
    justify-content: space-between;
    width: 77%;
}
.column-box >div img { border-radius: 40px;}
.column .right {position: absolute;bottom: 0;right: 20%;}

.column-box .date { margin: 1em; font-size: 90%;}
.column-box .headline { margin: 0 1em; text-decoration: underline;}

.slick-prev:hover ,.slick-next:hover{opacity: .5;} 
.slick-prev{
    position: absolute;
    top: 55%;
    left: 0;
    cursor: pointer;
    height: 50px;
    width: 50px;
}
.slick-prev:before,.slick-next:before {content:none}

.slick-next {
    position: absolute;
    top: 55%;
    left: 13%;
    cursor: pointer;
    height: 50px;
    width: 50px;
}


.slider {
    position:relative;
    z-index: 0;
}

.column-box .slick-slide {margin-right: 20px;}
.mv .slick-slide img {display: inline;height: 81vh;width: 82.3%;object-fit: cover;}
.slick-slider {position: initial;}

/*==================================================

Media Quaries, max-width: 1023px
==================================================*/
@media only screen and (max-width: 1023px) {
    .course .viewport-l{padding:0;margin: 0;}
    .mv .slick-slide {
        height: inherit;
}
    .course .course-img img{
    width: 100%;
    height: 250px;
    object-fit: cover;
    object-position: 0 -60px;
}
    .search_btn{
        display: none;
    }
    .mv {padding: 11.5% 0 0;margin-bottom: -4em;}
    .mv-wrap{position: inherit;width: fit-content;}
    .mv .mv-text {margin-bottom: 1.3125rem; left: 0; /*padding: 0 5%;*/}
    .mv .slick-slide img {width: calc(100% - 1em);height: inherit;aspect-ratio: 81/52;}
    .mv-banner {text-align: center;margin: 0 1em;position: relative;top: -3em;}
    .mv-banner > div a{position: initial;margin: 7em auto 4em;display: block;max-width: 500px;width: 100%;transform: scale(1);}
    .mv dl {position: relative;/*right: 0;left: 0;*/justify-content: center;bottom: -2em;width:calc(100% - 1em);margin: 0 0 0 1em;}
    .slick-dots {justify-content: center;width:100%;left:0;padding-left:1em;}
    .slick-dots li{margin:0 1em;}
    .course {background-size: 155%;background-position: -30px -100px;width: 100%;overflow: hidden;}
    .course .course-text,.trial .trial-text{margin: 60% 0 5em;width: 100%;padding: 14% 5% 16%;position: relative;}
    .course-text ul{justify-content: flex-start;margin-bottom: 2em;}
    .course-text ul li {width: 47%;margin-right: 6%;}
    .course-text ul li a{align-items: start;}
    .course-text ul li:nth-child(2n){margin-right: 0;}
    .course-text ul li img {
    width: 30px;
    }
    .course .side-text::after {right: -1.2rem;top:50%;}

    .trial {background-size: 120%; background-position: -75px -60px;justify-content: flex-end;}
    .trial .viewport-l {height: auto;padding: 0;width: 90%;margin: 0 0 0 10%;justify-content: end;position: relative;}
    .trial .side-text::after{left: -1.2rem;top:50%;}
    .trial .trial-text::after{width:87%;height:auto;top:1rem;left:10%;}
    .point > div:nth-child(2),.point > div:nth-child(3),.point > div:nth-child(4) {margin: 100px auto;}
    .point-box{display: block;position: relative;width: 90%;}
    .point-img img {width: 100%;}
    .point-text > div> p {max-width: none;}
    .point-text{display: block; margin: 0;}
    .point-text > p {position: absolute; top:0; color: #83BDAF;top: -60px; left: 30px;}
    .point-text h3 {margin: 1.5em 0;}

    .flow-box {text-align: center;}
    .flow-box::after {
        content: "";
        background: url(../img/step-img.png) no-repeat;
        background-size: contain;
        width: 188px;
        height: 60px;
        position: absolute;
        right: 2%;
        bottom: -10%;
    }
    .flow .headline-box {padding-bottom: 20px;}
    .flow .viewport-l{padding: 0;}
    .flow .headline-box p span{font-size: 15px;}
     .flow .headline-box p{
    font-size: 17px;
}

    .flow-box .step {margin-bottom: 20px;}
    .step .txt_big {font-size: 1.4em;}
    .step::after {display: none;}

    .teacher {padding: 3em 0 3.75em;width: 100%;overflow: hidden;}
    .teacher .headline-box {display: block;}
    .teacher .side-text::after{right: -1.2rem;}
    .info-blog {padding: 45px 0 3.75em;background-size: 250%;}
    .info-blog .side-text::after{left:-1.2rem;top:45%;}
    .column-box {width: 100%;margin: 3em 0 5em; padding: 0 1%;}
    .column .viewport-l {display: block;margin: 0 auto 40px;}
    .column .viewport-l >div:first-child {position: initial;width: 100%;}
    .column .right, .slick-prev, .slick-next{margin: 2em 0;}
    .flow .slick-prev, .flow .slick-next{top: initial; bottom: -12%;}
    .column .slick-prev, .column .slick-next{top: initial; bottom: 0;}
.column .right{
    right: 2%;
}
}

@media only screen and (max-width: 745px) {
    main h2 {line-height: 2em;}
    .column-box >div img {border-radius: 20px;}
    .slick-next{left: 25%;}
}

@media only screen and (max-width: 550px) {
    .mv h2 {font-size: 1.7em; line-height: 1.5em;}
    .mv dt ,.mv dd {padding: 10px;font-size: 12px;}
    main h2 + p {font-size: 1.3em;}
    main h2 span{font-size: 3.5em;}
    .mv-banner > div a {padding: 10px;}
    .mv-banner > div ul li {font-size: 8px;}
    .mv-banner .mv-grid1{position: relative;left: -20px;}
    .mv-banner .mv-grid3{margin: 0;font-size: 12px;white-space: nowrap;position: relative;left: -35px;}
    .mv-banner .mv-grid3 span{
    letter-spacing: 0;
}
    .mv-banner .mv-grid1 img {width: 100px;}
    .mv-banner .mv-grid2{white-space: initial;line-height: 1.6em;position: relative;left: -36px;padding: 2px 9px;}
     .mv-banner .mv-grid2 span:first-child{display:block;font-size: 160%;}
    .point {background: #fff; padding: 0;}
    .point::after{width: 54px; height: 120px; bottom: -11em; right: 4em; transform: rotate(25deg);}
    .point .headline-box{text-align: center;}
    .point-text > p {font-size: 6em;}
    .point .headline-box p{text-align:center;}
	.flow .slick-prev, .flow .slick-next{ bottom: -15%;}
	.flow-box::after{ bottom: -12%; right:0;}
    .grid-item{grid-template-columns: 1fr 1fr;display: flex;flex-wrap: wrap;justify-content: center;align-items: flex-end;}
    .info-blog-box {display: flex;flex-direction: column;}
    .info-blog .viewport-l{
    display: flex;
    justify-content: end;
    margin: 0;
    width: 100%;
}
    .info-blog-box li a{flex-wrap:wrap;}
    .info-blog .headline{margin-left:0;}
    .grid-item div{width: 48%;}
    .teacher .viewport-l{padding-bottom:0;}
    .info-blog-box >div {width: 95%;margin-left: auto;}
    .info-blog-box >div:first-child {margin-bottom: 4em;}
    .side_text {display: none;}
    .info-blog .side_text {
    display:block;
    left: 2%;
    top: 45%;
}
    
}