@charset "UTF-8";


/*============================
 worry
============================*/
.worry {
    background: url(../img/guide/worry_bg.png) no-repeat center bottom/cover;
}

.worry__ttl {

    .fs-24 {
        margin-top: .5em;
    }
}

.worry__container {
    max-width: 1220px;
    margin: 0 auto;
    padding: 260px 0 0;
}

.worry__ul {
    & li {
        position: absolute;
        transform: translate(-50%, -50%);

        &:nth-child(1) {
            max-width: 334px;
            width: calc((334/1220)*100%);
            left: 10%;
            top: 55%;
        }

        &:nth-child(2) {
            max-width: 276px;
            width: calc((276/1220)*100%);
            left: 27%;
            top: 25%;
        }

        &:nth-child(3) {
            max-width: 355px;
            width: calc((355/1220)*100%);
            left: 55%;
            top: 23%;
        }

        &:nth-child(4) {
            max-width: 255px;
            width: calc((255/1220)*100%);
            left: 80%;
            top: 20%;
        }

        &:nth-child(5) {
            max-width: 327px;
            width: calc((327/1220)*100%);
            left: 85%;
            top: 60%;
        }
    }


}

.worry__ill {
    max-width: 765px;
    width: calc((765/1220)*100%);
    margin: 0 auto;
}

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


    .worry__container {
        padding: 220px 0 0;
    }

    .worry__ul {
        & li {

            &:nth-child(1) {
                width: calc((334/1220)*100%);
                left: 10%;
                top: 55%;
            }

            &:nth-child(2) {
                width: calc((276/1220)*100%);
                left: 27%;
                top: 25%;
            }

            &:nth-child(3) {
                width: calc((355/1220)*100%);
                left: 55%;
                top: 23%;
            }

            &:nth-child(4) {

                width: calc((255/1220)*100%);
                left: 80%;
                top: 20%;
            }

            &:nth-child(5) {
                width: calc((327/1220)*100%);
                left: 85%;
                top: 60%;
            }
        }


    }

    .worry__ill {
        width: calc((765/1220)*100%);
        margin: 0 auto;
    }
}

@media screen and (max-width:767px) {
    .worry__ttl {
        .txt {
            line-height: 1.4;
        }
    }

    .worry__container {
        padding: 20px 0 0;
    }

    .worry__ul {
        & li {
            position: relative;
            transform: none;

            &:nth-child(1) {
                width: calc((334/1220)*200%);
                left: auto;
                top: auto;
            }

            &:nth-child(2) {
                width: calc((276/1220)*200%);
                left: auto;
                top: auto;
                margin: -20px 0 0 auto;
            }

            &:nth-child(3) {
                width: calc((355/1220)*200%);
                left: auto;
                top: auto;
                margin: -30px 0 0;
            }

            &:nth-child(4) {

                width: calc((255/1220)*200%);
                left: auto;
                top: auto;
                margin: -50px 0 0 auto;
            }

            &:nth-child(5) {
                width: calc((327/1220)*200%);
                left: auto;
                top: auto;
                margin: -50px 0 0;
            }
        }


    }

    .worry__ill {
        width: 100%;
        margin: 0 auto;
    }
}


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

.rea__ttl {
	.fs-34{
	line-height:1.4;
	}
    .fs-20 {
        margin-top: .5em;
    }
}

.reason__items {
    min-height: 300vh;
}

.rea__atc {
    padding: 120px 0;
    background:
        url(../img/guide/reason_obj.png) no-repeat 100% 75%/24%,
        url(../img/guide/reason_bg01.png) no-repeat center top/cover;
    border-radius: 50px 50px 0 0;
    position: sticky;
    top: 100px;

    &:nth-child(2) {

        background:
            url(../img/guide/reason_obj.png) no-repeat 100% 75%/24%,
            url(../img/guide/reason_bg02.png) no-repeat center top/cover;
        top: 150px;
    }

    &:nth-child(3) {
        background:
            url(../img/guide/reason_obj.png) no-repeat 100% 75%/24%,
            url(../img/guide/reason_bg03.png) no-repeat center top/cover;
        top: 200px;
    }

    .inner__mid {
        max-width: 1000px;
    }
}

.rea__img {
    width: 45%;
}

.rea__txtwrap {
    width: 51%;
}

.rea__h3 {
    margin-bottom: .5em;
}

.rea__btnwrap {
    margin-top: 50px;
}

.rea__btn {
    margin: 0 1%;
    max-width: 31%;
    justify-content: center;
    height: 52px;
    font-size: 1.4rem;
}

@media screen and (max-width:1024px) {
    .rea__ttl {
        .fs-20 {
            margin-top: .5em;
        }
    }

    .reason__items {
        min-height: 200vh;
    }

    .rea__atc {
        padding: 80px 0;
        top: 100px;

        &:nth-child(2) {
            top: 150px;
        }

        &:nth-child(3) {
            top: 200px;
        }
    }

    .rea__img {
        width: 45%;
    }

    .rea__txtwrap {
        width: 51%;
    }

    .rea__h3 {
        margin-bottom: .5em;
    }

    .rea__btnwrap {
        margin-top: 40px;
    }

    .rea__btn {
        margin: 0 1%;
        max-width: 31%;
        height: 45px;
        font-size: 1.4rem;
    }

}

@media screen and (max-width:767px) {
    .rea__ttl {
        .fs-20 {
            margin-top: .5em;
        }
    }

    .reason__items {
        min-height: auto;
    }

    .rea__atc {
        padding: 40px 0 60px;
        border-radius: 20px 20px 0 0;
        top: auto;
        position: relative;

        &:nth-child(2) {
            top: auto;
            margin-top: -20px;
        }

        &:nth-child(3) {
            top: auto;
            margin-top: -20px;
        }
    }

    .rea__h3 {
        font-size: 1.8rem;
    }

    .rea__img {
        width: 80%;
        margin: 0 auto 30px;
    }

    .rea__txtwrap {
        width: 100%;
    }

    .rea__h3 {
        margin-bottom: .5em;
    }

    .rea__btnwrap {
        margin-top: 30px;
    }

    .rea__btn {
        margin: 0 auto 10px;
        max-width: 100%;
        height: 45px;
        font-size: 1.4rem;
    }
}



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

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

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

.lesson__atc {
    padding: 40px 5%;
    position: relative;
    background: url(../img/guide/lesson_bg.png) no-repeat center center/cover;
    margin-bottom: 40px;
    border-radius: 5px;
align-items: flex-start;
    &:last-child {
        margin-bottom: 0;
    }

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

.lesson__txtwarp {
    width: 45%;
}

.lesson__img {
    width: 50%;

    & figcaption {
        margin-top: 1em;
    }
}

.lessonn__price {
    display: flex;
    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: 1em;
        font-weight: 500;
    }

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

.lesson__btn {
    margin: 0 2%;
    max-width: 45%;
}

.lesson__box {
    padding: 40px 5%;
    border-radius: 5px;
    border: solid 1px #464D83;

    .lesson__txtwarp {
        width: 47%;
    }

    .lesson__img02 {
        width: 50%;
    }

}
.lesson__h4{
    margin-bottom: 5px;
}


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



    .lesson__atc {
        padding: 30px 5%;

        margin-bottom: 30px;
    }

    .lesson__txtwarp {
        width: 45%;
    }

    .lesson__img {
        width: 50%;
    }

    .lessonn__price {
        margin-bottom: 1em;

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

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

    .lesson__btn {
        margin: 0 2%;
        max-width: 45%;
    }

    .lesson__box {
        padding: 30px 5%;

        .lesson__txtwarp {
            width: 47%;
        }

        .lesson__img02 {
            width: 50%;
        }
    }


}

@media screen and (max-width:767px) {
    .lesson__atc {
        padding: 30px 5%;
        margin-bottom: 30px;
        .box-txt {
            margin: 0 auto 10px;
        }
    }

    .lesson__ttl {
        display: block;

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

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

    .lesson__img {
        width: 100%;
    }
.lesson__h4{
    text-align: center;
}
    .lessonn__price {
        justify-content: center;
        margin-bottom: 1em;
        .fs-56 {
            font-size: 4rem;
        }

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

    .lesson__btn {
        margin: 0 auto 15px;
        max-width: 100%;

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

    .lesson__box {
        padding: 30px 5%;

        .lesson__txtwarp {
            width: 100%;
        }

        .lesson__img02 {
            width: 100%;
        }
    }


}




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

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

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


.faq__ul {

    & li {
        padding: 2em 1em 2em 50px;
        border-top: solid 2px #464D83;
        position: relative;
        transition: .3s;

        &:last-child {
            border-bottom: solid 2px #464D83;
        }
    }
}

.faq__q {
    cursor: pointer;
    position: relative;
    color: #464D83;

    .mark {
        position: absolute;
        line-height: 1;
        left: -1.5em;
        top: .1em;
    }

    .faq__btn {
        position: absolute;
        top: 50%;
        right: 0;
        width: 5px;
        height: 20px;
        background: #464D83;
        transform: translate(0, -50%);
        transition: .3s;

        &::before {
            content: "";
            position: absolute;
            width: 20px;
            height: 5px;
            top: 50%;
            left: 50%;
            background: #464D83;
            transform: translate(-50%, -50%);
            transition: .3s;
        }
    }

    &.close {

        .faq__btn {

            transform: translate(0, -50%) rotate(90deg);

            &::before {
                opacity: 0;
            }
        }
    }

}

.faq__ul li:has(.close) {
    background: #F7F8FA;
}

.faq__a {
    display: none;
    padding: 1em 0 0;
}


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

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

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


    .faq__ul {

        & li {
            padding: 1em 1em 1em 40px;
            border-top: solid 1px #464D83;

            &:last-child {
                border-bottom: solid 1px #464D83;
            }
        }
    }

    .faq__q {

        .mark {
            left: -1.5em;
            top: .1em;
        }

        .faq__btn {
            right: 0;
            width: 3px;
            height: 20px;

            &::before {

                width: 20px;
                height: 3px;
            }
        }


    }

    .faq__a {
        padding: 1em 0 0;
    }

}

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

    .faq__ttl {
        margin-bottom: 30px;

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


    .faq__ul {

        & li {
            padding: 1em 2em 1em 25px;
        }
    }

    .faq__q {

        .mark {
            left: -1.5em;
            top: .3em;
        }

        .faq__btn {
            right: -1.5em;

            width: 2px;
            height: 15px;

            &::before {

                width: 15px;
                height: 2px;
            }
        }


    }

    .faq__a {
        padding: 1em 0 0;
    }

}