@charset "UTF-8";

/*============================
 fearure
============================*/
.fearure {
    padding-bottom: 500px;
}

.feat__ttl {
    position: sticky;
    top: 150px;

    .txt {
        margin-top: .5em;
    }

    &::before {
        content: "";
        position: absolute;
        width: 100%;
        height: calc(100% + 200px);
        bottom: -50px;
        left: 0;
        background: linear-gradient(#fff 0, #fff 90%, transparent);
    }
}

.feat__obj {
    position: absolute;
    bottom: -100px;
    right: 0;
    opacity: 1;
    width: 180px;
}

.feat__imgwrap {
    position: sticky;
    width: 45%;
    top: 250px;
    left: 0;
}

.feat__img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

.feat__txtwarp {
    width: 50%;
    margin: 0 0 0 auto;
    padding: 100px 0;
    min-height: 486px;
}

/* gsap */
.fearure {
    .gsap-wrapper {
        width: 100%;
        /* height: 400vh; */
    }

    .gsap-container {
        width: 100%;
        padding: 0;
        margin: 0 auto;
        min-height: 100vh;
    }
}

.feat__atc {
    width: 100%;
    position: unset;
}



@media screen and (max-width:1024px) {
    .fearure {
        padding-bottom: 300px;
    }

    .feat__ttl {
        top: 150px;

        .txt {
            margin-top: .5em;
        }

        &::before {
            height: calc(100% + 200px);
            bottom: -50px;
        }
    }

    .feat__obj {
        bottom: -80px;
        right: 0;
        opacity: 1;
        width: 100px;
    }

    .feat__imgwrap {
        position: sticky;
        width: 45%;
        top: 300px;
        left: 0;
    }

    .feat__img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
    }

    .feat__txtwarp {
        width: 50%;
        margin: 0 0 0 auto;
        padding: 50px 0;
        min-height: 400px;
    }

    /* gsap */
    .fearure {
        .gsap-wrapper {
            width: 100%;
        }

        .gsap-container {
            width: 100%;
            min-height: 100vh;
        }
    }

    .feat__atc {
        width: 100%;
    }


}

@media screen and (max-width:767px) {
    .fearure {
        padding-bottom: 60px;
    }

    .feat__ttl {
        top: 0;
        position: relative;

        .txt {
            margin-top: .5em;
        }

        &::before {
            height: calc(100% + 200px);
            bottom: -50px;
        }
    }

    .feat__obj {
        bottom: -60px;
        right: -3%;
        width: 80px;
    }

    .feat__imgwrap {
        position: relative;
        display: none;
    }

    .feat__img {
        position: relative;
        top: auto;
        left: auto;
        width: 80%;
        margin: 0 auto 20px;
    }

    .feat__h3 {
        text-align: center;
    }

    .feat__txtwarp {
        width: 100%;
        margin: 0 auto;
        padding: 0;
        min-height: auto;
    }

    /* gsap */
    .fearure {
        .gsap-wrapper {
            width: 100%;
        }

        .gsap-container {
            width: 100%;
            min-height: auto;
        }
    }

    .feat__atc {
        width: 100%;
        margin: 0 auto 40px;

        &:last-child {
            margin-bottom: 0;
        }
    }

}


/*============================
 lesson
============================*/
.lesson {
    padding-bottom: 0;
}

.lesson__ttl {
    display: flex;
    align-items: baseline;

    .txt {
        margin-left: .5em;
    }
}

.lesson__box {
    position: relative;
    padding: 40px 5% 60px;
    border-radius: 5px;
    background: url(../img/top/plan_bg02.png) no-repeat center center/cover;
    margin-bottom: 150px;

    &:first-child {
        background: url(../img/top/plan_bg01.png ) no-repeat center center/cover;
    }

    &:last-child {
        margin-bottom: 0;
    }

}

.lesson__pop {
    max-width: 210px;
    top: 50px;
    left: 15%;
    transform: translate(-50%, -50%);

}

.lesson__h3 {
    width: fit-content;
    padding: 0 1em .5em;
    border-bottom: dotted 4px #464D83;
    margin: 0 auto 30px;

    & span {
        display: block;
    }
}

.lesson__atc {
    width: 50%;
    border-right: dotted 1.5px #464D83;
    padding: 0 1em 40px;
    position: relative;

    &:last-child {
        border: none;
    }

    .box-txt {
        width: fit-content;
        margin: 0 auto;
        padding: 0 1em;
        border-radius: 17px;
        border: solid 1px #464D83;
        margin-bottom: 1em;
        font-weight: 500;
    }
}

.lesson__atc--inner {
    width: fit-content;
    margin: 0 auto;
    width: 100%;
}

.lessonn__price {
    display: flex;
    justify-content: center;
    white-space: nowrap;
    align-items: self-end;
    margin-bottom: 1em;

    .fs-56 {
        font-size: 5.6rem;
        line-height: 1;
        font-weight: 500;
    }

    .fs-18 {
        padding-left: .5em;
        font-weight: 500;
    }

    .fs-10 {
        font-size: 1rem;
        line-height: 1;
        display: block;
        font-weight: 500;
    }
}

.lesson__btnwrap {
    margin-top: 40px;

    .lesson__btn {
        margin: 0 2%;
    }
}

.lesson__box:nth-child(2) {

    .lesson__atc {
        border-color: #848484;
    }

}

.lesson__box:nth-child(3) {
    .lesson__items {
        padding-bottom: 20px;
        margin-bottom: 20px;
        border-bottom: dotted 1.5px #848484;

        .lesson__atc {
            border-color: #848484;
        }

        &:last-child {
            border: none;
        }
    }

    .lesson__member {
        width: 92px;
        top: 0;
        left: calc(50% - 200px);
        transform: translate(-50%);
    }

    .lesson__btnwrap {
        margin-top: -30px;
    }
}

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


    .lesson__box {
        position: relative;
        padding: 40px 5% 40px;
        margin-bottom: 100px;

    }

    .lesson__pop {
        max-width: 150px;
        top: 30px;
        left: 13%;

    }

    .lesson__h3 {
        padding: 0 1em .5em;
        border-bottom: dotted 4px #464D83;
        margin: 0 auto 30px;

    }

    .lesson__atc {
        width: 50%;
        border-right: dotted 1.5px #464D83;
        padding: 0 1em 30px;

        .box-txt {
            margin: 0 auto;
            padding: 0 1em;
            border-radius: 17px;
            margin-bottom: 1em;
        }
    }

    .lessonn__price {
        align-items: self-end;
        margin-bottom: 1em;

        .fs-56 {
            font-size: 4rem;
        }

        .fs-18 {
            padding-left: 1em;
        }

    }

    .lesson__btnwrap {
        margin-top: 30px;

        .lesson__btn {
            margin: 0 2%;
        }
    }

    .lesson__box:nth-child(3) {
        .lesson__items {
            padding-bottom: 10px;
            margin-bottom: 10px;
            border-bottom: dotted 1.5px #464D83;
        }

        .lesson__member {
            width: 80px;
            top: 0;
            left: calc(50% - 150px);
        }

        .lesson__btnwrap {
            margin-top: -20px;
        }
    }
}

@media screen and (max-width:767px) {
    .lesson__box {
        padding: 140px 5% 40px;
        margin: 100px 0;

    }
    .lesson__box--patter{
        padding: 40px 5% 20px !important;
    }

    .lesson__pop {
        max-width: 180px;
        top: 20px;
        left: 50%;

    }

    .lesson__h3 {
        padding: 0 1em .5em;
        border-bottom: dotted 4px #464D83;
        margin: 0 auto 30px;

    }

    .lesson__atc {
        width: 100%;
        border: none;
        border-bottom: dotted 1.5px #464D83;
        padding: 0 1em 30px;
        margin-bottom: 30px;

    }

    .lessonn__price {
        margin-bottom: 1em;

        .fs-56 {
            font-size: 4rem;
        }

    }

    .lesson__btnwrap {
        margin-top: 20px;

        .lesson__btn {
            margin: 0 auto 15px;

            &:last-child {
                margin: 0;
            }
        }
    }

    .lesson__box:nth-child(3) {
        .lesson__items {
            padding-bottom: 10px;
            margin-bottom: 10px;
            border-bottom: dotted 1.5px #464D83;
        }

        .lesson__member {
            width: 60px;
            top: 0;
            left: calc(50% - 120px);
        }
    }
}

/*============================
 schedule
============================*/
.schedule {
    padding-bottom: 0;

    &::before {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        background: url(../img/lesson/schedule_bg.png) no-repeat center bottom/cover;
        bottom: -300px;
        left: 0;
        z-index: -1;
    }

}

.sch__ttl {
    display: flex;
    align-items: baseline;

    .txt {
        margin-left: .5em;
    }
}

.sch__items {
    max-width: 900px;
    margin: 0 auto;
}

.sch__atc01 {
    padding: 40px 5%;
    background: #fff;
    border: solid 1px #464D83;
    margin-bottom: 30px;
    border-radius: 5px;
}

.sch__left {
    width: 47%;
}

.sch__img {
    width: 47%;
    max-width: 352px;
}

.sch__pop01 {
    display: block;
    max-width: 280px;
    margin-bottom: 40px;

}

.sch__pop02 {
    display: block;
    max-width: 226px;
    margin: 0 auto 20px;
}

.sch__btn {
    text-align: left;

    .txt {
        font-weight: bold;

    }
}

.sch__atc02 {

    border: solid 1px #464D83;
    background: #fff;
    border-radius: 5px;
    padding: 80px 5%;
}

.sch__left {
    width: 40%;
}

.step__right {
    width: 55%;
    position: relative;

    &::before {
        content: "";
        position: absolute;
        width: 2px;
        height: calc(100% - 50px);
        border-left: dotted 2px #464D83;
        top: 0;
        left: 28px;
    }

    & li {
        margin-bottom: 40px;
        display: flex;

        &:last-child {
            margin-bottom: 0;
        }

        .fs-14 {
            font-size: 1.3rem;
        }
    }
}

.step__num {
    width: 58px;
    min-width: 58px;
    height: 58px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: solid 1px #464D83;
    color: #464D83;
    background: #fff;
    letter-spacing: .05em;
    margin-right: 1em;
    position: relative;

}

@media screen and (max-width:1024px) {
    .schedule {

        &::before {
            bottom: -250px;
        }

    }


    .sch__atc01 {
        padding: 40px 5%;
        margin-bottom: 30px;
        border-radius: 5px;
    }

    .sch__left {
        width: 47%;
    }

    .sch__img {
        width: 47%;
    }

    .sch__pop01 {
        max-width: 280px;
        margin-bottom: 30px;

    }

    .sch__pop02 {
        max-width: 226px;
        margin-bottom: 20px;
    }


    .sch__atc02 {
        padding: 30px 3%;
    }

    .sch__left {
        width: 40%;
    }

    .step__right {
        width: 58%;

        &::before {
            width: 2px;
            height: calc(100% - 50px);
            top: 0;
            left: 24px;
        }

        & li {
            margin-bottom: 30px;

            .fs-14 {
                font-size: 1.2rem;
            }
        }
    }

    .step__num {
        width: 50px;
        min-width: 50px;
        height: 50px;
        border-radius: 50%;

    }
}

@media screen and (max-width:767px) {
    .schedule {

        &::before {
            bottom: -300px;
        }

    }

    .sch__ttl {
        display: block;

        .txt {
            margin: .5em 0 0;
        }
    }

    .sch__atc01 {
        padding: 40px 5%;
        margin-bottom: 30px;
        border-radius: 5px;
    }

    .sch__left {
        width: 100%;
        margin-bottom: 20px;
    }

    .sch__img {
        width: 100%;
    }

    .sch__h4 {
        text-align: center;
        font-size: 1.8rem;
    }

    .sch__pop01 {
        max-width: 220px;
        margin: 0 auto 20px;

    }

    .sch__pop02 {
        max-width: 200px;
        margin: 0 auto 20px;
    }

    .sch__atc02 {
        padding: 30px 5% 40px;
    }


    .sch__left {
        width: 100%;
        margin-bottom: 30px;

        .fs-14 {
            text-align: center;
        }
    }

    .step__h3 {
        text-align: center;
    }

    .step__h4 {
        font-size: 1.8rem;
        text-align: left;
    }

    .step__right {
        width: 100%;

        &::before {
            display: none;
        }

        & li {
            display: block;
            margin-bottom: 30px;

            .fs-14 {
                font-size: 1.2rem;
            }
        }
    }

    .step__num {
        width: 50px;
        min-width: 50px;
        height: 50px;
        border-radius: 50%;
        margin: 0 auto .5em 0;
        font-size: 1.8rem;

    }
}