@charset "utf-8";

/* mv */
.mv {
    position: relative;
}

.mv::before {
    position: absolute;
    content: "";
    display: inline-block;
    background-image: url(../image/deco_01.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    width: 15%;
    height: 40%;
    top: -3em;
    right: 0;
    z-index: 4;
}

.mv .mv_inner {
    margin-top: 65px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    position: relative;
}

.mv .body {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
}

.mv .body_subtitle {
    font-weight: bold;
}

.mv .body_subtitle .br-sp {
    display: none;
}

.mv .body_title {
    font-size: clamp(1.5rem, -0.507rem + 4.18vw, 2.625rem);
    font-weight: bold;
    color: #468902;
    margin-top: 20px;
    line-height: 1.8;
}

.mv .body_title span {
    display: block;
    width: 100%;
}

.mv .body_title span img {
    width: 70%;
}

.mv .catch_list {
    display: flex;
    justify-content: space-between;
    max-width: 525px;
}

.mv .catch {
    margin-top: 20px;
}


.mv .catch_list li {
    font-size: clamp(0.625rem, 0.489rem + 0.68vw, 1rem);
    background-color: rgba(254, 245, 143, 0.8);
    border: 2px solid rgba(231, 223, 132, 0.7);
    border-radius: 50%;
    padding: 2em 0;
    width: clamp(5rem, 4.091rem + 4.55vw, 7.5rem);
    text-align: center;
}

.mv .video {
    position: relative;
    width: 70%;
}


.mv .video_contents {
    width: 100%;
}

.mv .mask-image {
    mask-image: url(../image/mask-image.svg);
    mask-repeat: no-repeat;
    mask-position: 0 0;
    mask-size: 100%;
}



/*  導入文(top-intro) */
.intro {
    max-width: 1040px;
    margin-top: clamp(7.5rem, 5.682rem + 9.09vw, 12.5rem);
}

.intro .worry {
    border: 2px solid #468902;
    padding: clamp(2.188rem, 1.92rem + 1.34vw, 3.125rem) clamp(0.938rem, -0.426rem + 6.82vw, 4.688rem);
}


.intro .worry_heading {
    text-align: center;
}

.intro .worry_title {
    word-break: auto-phrase;
    font-size: clamp(1.25rem, 1.068rem + 0.91vw, 1.75rem);
    color: #468902;
    font-weight: bold;
}

.intro .worry_titletext {
    display: inline-block;
    max-width: 670px;
    margin: clamp(1.875rem, 1.696rem + 0.89vw, 2.5rem) 0;
}


.intro .worry_body {
    display: flex;
    justify-content: space-between;
}


.intro .worry_imagebox {
    display: block;
    width: 42%;
}

.intro .worry_listsbox {
    width: 55%;
}

.intro .worry_lists {
    background-color: #E3F4C2;
    border-radius: 30px;
    padding: clamp(1.063rem, 0.676rem + 1.93vw, 2.125rem) clamp(1rem, 0.636rem + 1.82vw, 2rem);

}

.intro .worry_lists li {
    margin-top: 20px;
    list-style: inside;
    padding-left: 1em;
    text-indent: -1em;
}

.intro .worry_lists li:first-child {
    margin-top: 0;
}

.intro .concept {
    position: relative;
    margin-top: clamp(3.125rem, 2.216rem + 4.55vw, 5.625rem);
    padding-top: clamp(1.875rem, 1.193rem + 3.41vw, 3.75rem);
    padding-bottom: 50px;
}

.intro .concept::before {
    position: absolute;
    content: "";
    background-image: url(../image/intro_bg_02.png);
    background-repeat: no-repeat;
    background-size: contain;
    top: -12%;
    left: -12%;
    width: 116%;
    height: 116%;
    z-index: -1;
}

.intro .concept_text {
    font-size: clamp(1.125rem, 0.807rem + 1.59vw, 2rem);
    font-weight: bold;
    line-height: 2.4;
    text-align: center;
    color: #64A91E;
}

.intro .concept_text .br-sp {
    display: none;
}


.intro .concept_imagebox {
    display: flex;
    justify-content: space-between;
}

.intro .concept_image {
    width: 30%;
}


/* about */

.about {
    position: relative;
    margin-top: clamp(7.5rem, 3.409rem + 20.45vw, 18.75rem);
    max-width: 1200px;
}

.about::before {
    position: absolute;
    content: "";
    background-image: url(../image/deco_01.png);
    background-repeat: no-repeat;
    background-size: contain;
    width: 10%;
    height: 8%;
    top: 4em;
    right: 0;
}

.about .about_container {
    margin-top: clamp(3.75rem, 2.386rem + 6.82vw, 7.5rem);
    display: flex;
    flex-direction: column;
    gap: clamp(6.25rem, 4.659rem + 7.95vw, 10.625rem);
}

.about .about_box {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.about .about_body {
    position: relative;
    width: 50%;
}

.about .about_body::before {
    content: "";
    position: absolute;
    font-family: "Satisfy", cursive;
    font-weight: 400;
    font-style: normal;
    line-height: 1;
    font-size: clamp(5rem, 3.571rem + 7.14vw, 10rem);
    color: rgba(231, 223, 132, 0.7);
    z-index: -1;
}

.about .body_01::before {
    content: "01";

}

.about .body_02::before {
    content: "02";

}

.about .body_03::before {
    content: "03";

}

.about .about_subtitle {
    justify-content: end;
    margin-top: 30px;
}

.about .about_title {
    word-break: auto-phrase;
    line-height: 1.6;
    margin-top: 15px;
    font-size: clamp(1.188rem, 0.545rem + 1.34vw, 1.75rem);
    font-weight: bold;
}

.about .about_title.title_second {
    word-break: normal
}

.about .about_text {
    margin-top: 20px;
}

.about .about_btnarea {
    text-align: end;
    margin-top: 20px;
}

.about .about_imagearea {
    width: 40%;
    position: relative;
}


.about .about_imagearea::before {
    position: absolute;
    content: "";
    z-index: -1;
    background: #e3f4c2;
    top: clamp(1.25rem, 0.795rem + 2.27vw, 2.5rem);
    right: clamp(1.25rem, 0.795rem + 2.27vw, 2.5rem);
    width: 100%;
    height: 100%;
}


/* lesson〜courseまでの共通 */
.lesson,
.course {
    margin-top: clamp(12.5rem, 11.364rem + 5.68vw, 15.625rem);
    position: relative;
}

.lesson .container_group-lesson,
.course .course_container{
    justify-content: center;
    gap: 20px;
}


.lesson::before,
.course::before{
    content: "";
    width: 18%;
    height: 18%;
    top: -9em;
    position: absolute;
    background-repeat: no-repeat;
    background-size: contain;
}

.Toplesson-btnlist {
    display: block;
    text-align: center;
    margin-top: clamp(1.375rem, 1.518rem + 1.79vw, 2rem);
}

.top-reserve_btn {
    display: block;
}

.top-reserve_btn .btn_inner {
    justify-content: center;

}

.lesson::before {
    background-image: url(../image/deco_02.png);
    transform: scale(-1, 1);
    top: -9em;
    left: 2em;
}

.private-lesson::before {
    transform: none;
    left: auto;
    right: -2em;

}

.course::before {
    background-image: url(../image/deco_03.png);
    transform: scale(-1, 1);
    left: 2em;
}



/* voice */
.voice {
    max-width: 1080px;
    margin-top: clamp(11.25rem, 9.659rem + 7.95vw, 15.625rem);
    padding: 70px clamp(1.875rem, 0.089rem + 8.93vw, 4.375rem) 120px;
    background-color: #F3FDE0;
    border-radius: 70px;
}

.voice .voice_container {
    margin-top: clamp(1.875rem, 1.42rem + 2.27vw, 3.125rem);
}

.voice .voice-detail_lists:first-of-type {
    margin-top: 0;
}

.voice .voice-detail_name span {
    font-weight: bold;
    color: #468902;
}



/* access */
.access {
    position: relative;
    max-width: 1080px;
    margin-top: clamp(9.375rem, 8.239rem + 5.68vw, 12.5rem);
}

.access::before {
    position: absolute;
    content: "";
    background-image: url(../image/deco_02.png);
    background-repeat: no-repeat;
    background-size: contain;
    transform: rotate(-50deg);
    width: 15%;
    height: 15%;
    top: 3em;
    right: 1em;
}

.access .access_titlearea {
    width: 43%;
}


.access .access_container {
    margin-top: 50px;
}

.access .access_head {
    display: flex;
    justify-content: space-between;

}


.access .access_map {
    width: 48%;
}

.access .access_map iframe {
    height: 100%;
    width: 100%;
    aspect-ratio: 52 / 43;
}

.access .shop {
    width: 48%;
}

.access .shop_name {
    font-size: clamp(1.375rem, 1.232rem + 0.71vw, 1.875rem);
    font-weight: bold;
    color: #468902;
}

.access .shop_address {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 1em;

}

.access .access_foot {
    margin-top: 50px;
    display: flex;
    justify-content: space-between;
}

.access .access_imagearea {
    width: 30%;

}

.access .access_imagearea p {
    margin-top: 20px;
}


/* info */
.info {
    margin-top: clamp(7.5rem, 5.682rem + 9.09vw, 12.5rem);
    padding: clamp(3.125rem, -0.446rem + 7.44vw, 6.25rem) clamp(1.875rem, 0.268rem + 8.04vw, 7.5rem);
    background-image: url(../image/info_bg_03.png);
    border-top: 2px solid #468902;
    border-bottom: 2px solid #468902;
    background-repeat: repeat;
    background-size: contain;
    width: 100%;
    height: 100%;
    position: relative;
}

.info::before {
    position: absolute;
    content: "";
    background-image: url(../image/deco_03.png);
    background-repeat: no-repeat;
    background-size: contain;
    transform: scale(-1, 1);
    width: 13%;
    height: 20%;
    top: -5em;
    left: 6em;

}



.info .article {
    max-width: 1050px;
    width: 90%;
    margin: 50px auto 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.info .article .article_box {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 2px solid #468902;
    background-color: #fff;
    padding: 21px clamp(1.188rem, -0.813rem + 4.17vw, 2.938rem);

}

.info .article .article_box::before,
.info .article .article_box::after {
    content: "";
    position: absolute;
    width: clamp(0.625rem, 0.511rem + 0.57vw, 0.938rem);
    height: clamp(0.625rem, 0.511rem + 0.57vw, 0.938rem);
    background-color: #C8E88A;
    border-radius: 50%;
}

.info .article .article_box::before {
    top: clamp(0.625rem, 0.511rem + 0.57vw, 0.938rem);
    left: clamp(0.625rem, 0.511rem + 0.57vw, 0.938rem);
}

.info .article .article_box::after {
    top: clamp(0.625rem, 0.511rem + 0.57vw, 0.938rem);
    right: clamp(0.625rem, 0.511rem + 0.57vw, 0.938rem);
}


.info .article .article_title {
    text-align: center;
    word-break: auto-phrase;
    font-size: clamp(1.25rem, 1.136rem + 0.57vw, 1.563rem);
    font-weight: bold;
}


.info .article .article_list {
    margin-top: 30px;
    list-style: inside;
    padding-left: 1em;
    text-indent: -1em;
}

.info .article .info_btn {
    margin-top: 15px;
    transition: 0.5s;
}

.info .article .info_btn:hover {
    transform: scale(1.1);
}


.info .info_bunner {
    width: 45%;
    max-width: 450px;
}

.info .info_bunner img {
    transition: 0.5s;
}

.info .info_bunner img:hover {
    transform: scale(1.1);
}





/* レスポンシブ（1300px） */
@media (max-width: 1300px) {
    .mv .body_subtitle .br-sp {
        display: block;
    }
}


/* レスポンシブ（768px） */
@media (max-width: 768px) {



    /* mv */
    .mv::before {
        width: 25%;
        height: 20%;
        top: -3em;
    }

    .mv .mv_inner {
        margin-top: 40px;
        flex-direction: column-reverse;
        align-items: center;
    }

    .mv .body,
    .mv .video {
        width: 100%;
    }

    .mv .body {
        position: static;
        display: flex;
        flex-direction: column;
    }

    .mv .body_titlearea {
        text-align: center;
    }

    .mv .body_title {
        font-size: clamp(1.625rem, 1.223rem + 2.01vw, 2.188rem);
    }

    .mv .body_title span {
        font-size: clamp(2.813rem, 2.143rem + 3.35vw, 3.75rem);

    }

    .mv .catch_list {
        max-width: 100%;
        justify-content: center;
        gap: clamp(0rem, -1.116rem + 5.58vw, 1.563rem);
    }


    /* intro */
    .intro .worry_body {
        flex-direction: column;
        align-items: center;
    }

    .intro .worry_imagebox {
        width: 100%;
    }


    .intro .worry_listsbox {
        width: 100%;
        margin-top: 30px;
    }



    /* about */

    .about::before {
        width: 20%;
        height: 8%;
        right: 1em;
    }

    .about .about_box {
        flex-direction: column;
        align-items: center;
    }

    .about .about_body {
        width: 92%;
    }

    .about .about_imagearea {
        width: 80%;
        margin-top: 30px;
    }

    /* lesson~license */
    .lesson::before,
    .course::before{
        width: 28%;
    }


    /* voice */

    .voice .voice_list {
        flex-direction: column;
    }

    .voice .voice_image {
        width: 80px;
    }

    .voice .voice_text {
        margin-top: 16px;
    }

    .voice .voice_imagearea,
    .voice .voice_textarea {
        width: 100%;

    }



    /* access */
    .access::before {
        position: absolute;
        content: "";
        background-image: url(../image/deco_02.png);
        background-repeat: no-repeat;
        background-size: contain;
        transform: rotate(-10deg);
        width: 25%;
        height: 5%;
        top: -10em;
        right: 1em;
    }



    .access .access_head,
    .access .access_foot {
        flex-direction: column;
        align-items: center;
    }

    .access .access_foot {
        gap: 30px;
    }

    .access .access_map,
    .access .shop,
    .access .access_imagearea {
        width: 80%;
    }

    .access .access_titlearea {
        width: 100%;
    }

    .access .shop_name {
        text-align: center;
        margin-top: 30px;
    }


    /* info */
    .info::before {
        width: 30%;
        height: 15%;
        left: 2em;
    }

    .info .article {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 30px;
    }

    .info .article .article_box {
        width: 100%;
    }

    .info .info_bunner {
        width: 100%;
    }





}




/* レスポンシブ（520px） */
@media (max-width: 520px) {
    .intro .concept_text .br-sp {
        display: block;
    }

}