/* ----------------------------------------
教育
---------------------------------------- */
.sec_tl {
        font-size: 7vw;
        font-weight: 600;
        text-align: center;
        line-height: 1.7;
        width: 94vw;
        margin: 0 auto;
}
.under_yellow {
        background: linear-gradient(transparent 60%, var(--point-color) 60%);
}
.tl_yellow {
        color: var(--point-color);
}
.tl_dot {
        background-position: top 7px left 0px;
        background-repeat: repeat-x;
        background-size: 1em .3em;
        background-image: radial-gradient(0.1em .1em at center center, var(--point-color), var(--point-color) 100%, transparent, transparent);
        padding-top: .6em;
}
/* 教育 メイン main
---------------------------------------- */
.main {
        background: var(--main-color);
        padding: 50px 0 30px;
        position: relative;
        overflow: hidden;
        box-shadow: inset 0px -5px 10px rgba(0, 0, 0, .1);
}
.main::before {
        background: url(/scene/img/common/main_shape01.webp);
        content: "";
        display: block;
        position: absolute;
        width: 420px;
        height: 270px;
        top: -40px;
        left: -60px;
}
.main::after {
        background: url(/scene/img/common/main_shape02.webp);
        width: 490px;
        height: 280px;
        bottom: -20px;
        right: -20px;
        content: "";
        display: block;
        position: absolute;
}
.main_inner {
        width: 94vw;
        margin: 0 auto;
        position: relative;
        z-index: 1;
}
.main_box {
        position: relative;
        z-index: 1;
        margin-bottom: 30px;
}
.main_sb_catch {
        font-size: 5vw;
        line-height: 1.4;
        font-weight: 700;
        color: #fff;
        letter-spacing: 0.05em;
        margin-bottom: 15px;
}
.main_tl {
        margin-bottom: 20px;
}
.main_catch_txt {
        color: #fff;
        margin-bottom: 30px;
        font-size: 15px;
        font-weight: 500;
        text-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
.main_catch_contact {
        display: flex;
        flex-direction: column;
        gap: 15px;
}
a.btn_scene_main {
        height: 70px;
        border: none;
        border-radius: 35px;
        box-shadow: 0 0 10px 0 rgba(0, 0, 0, .1);
        margin: 0;
}
.main_image img {
        width: 80vw;
        margin: 0 auto;
        display: block;
}
.main_chara {
        position: absolute;
        bottom: -30px;
        right: 10px;
}
.main_chara img {
        display: block;
        width: 55vw;
}
/* 教育 課題 assign
---------------------------------------- */
.assign {
        width: 94vw;
    margin: 40px auto 0;
    position: relative;
}
.assign .sec_tl {
        margin-bottom: 20px;
}




.ass_li {
display: flex;
        flex-wrap: wrap;
        gap: 4vw;
        margin-bottom: 30px;
        justify-content: center;
}


.ass_li li {
                    position: relative;
            width: 44vw;
            height: 44vw;
            display: flex;
            align-items: center;
            box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
            border-radius: 50%;
}


.ass_li li span {
                        display: flex;
                align-items: center;
                justify-content: center;
                text-align: center;
                font-weight: 600;
                font-size: 3.4vw;
                line-height: 1.4;
                position: relative;
                z-index: 1;
                width: 38vw;
                margin: 0 auto 16vw;
}


.ass_li li img {
                        position: absolute;
                top: 0;
                left: 0;
}


.ass_onayami_catch {
                font-size: 7vw;
        font-weight: 600;
        display: flex;
        flex-direction: column;
        align-items: center;
}


.ass_onayami_catch::after {
                    content: "";
            display: block;
            background: url(/scene/img/education/ass_under.webp);
            background-position: center;
            background-repeat: no-repeat;
            background-size: contain;
            height: 20px;
            width: 100%;
}


.ass_onayami_chara {
                position: absolute;
        bottom: -40px;
        right: 0px;
}


.ass_onayami_chara img {
        width: 25vw;
}






/* 教育 特徴 features
---------------------------------------- */
.features {
margin-top: 150px;
padding-top: 40px;
        padding-bottom: 80px;
        background: var(--main-bright-color);
        position: relative;
        &:before {
                background: url(/scene/img/common/bg_wave_top.webp) 50% 0 no-repeat;
                background-size: cover;
            top: -50px;
            left: 0;
        }
        &::before {
                            content: "";
            display: block;
            position: absolute;
            width: 100%;
            height: 50px;
        }
}
.fea_arrow {
        position: absolute;
        width: 36px;
        top: -94px;
        left: calc(50% - 18px);
}


.fea_arrow img {
        width: 24px;
}


.features h2 {
    width: 94vw;
        margin: 0 auto 60px;
}


.fea_chara {
        position: absolute;
        top: -70px;
        left: calc(50% - 600px);
}


.fea_list {
        display: flex;
        justify-content: center;
        gap: 45px;
    width: 94vw;
        margin: 0 auto;
        flex-direction: column;
}


.fea_list li {
        background: #fff;
        border-radius: 20px;
        box-shadow: 0 0 10px 0 rgba(0, 0, 0, .1);
        box-sizing: border-box;
        padding: 35px 28px;
        position: relative;
        z-index: 1;
}


.fea_li_number {
                background: var(--main-color);
        width: 70px;
        height: 70px;
        border-radius: 90px;
        box-shadow: 0 0 10px 0 rgba(0, 0, 0, .1);
        color: #fff;
        line-height: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        margin: -65px auto 20px;
                        & span:nth-child(1) {
            font-size: 16px;
            font-weight: 600;
        }
                        & span:nth-child(2) {
            font-family: "Jost", sans-serif;
            font-weight: 600;
            font-size: 30px;
        }
}


.fea_li_tl {
                font-size: 5.5vw;
        color: var(--main-color);
        font-weight: 600;
        text-align: center;
        line-height: 1.7;
                letter-spacing: 0.02em;
        margin-bottom: 20px;
}


.fea_list li img {
        text-align: center;
    margin: 0 auto 20px;
        display: block;
}


.fea_li_desc {
                font-size: 4vw;
                        line-height: 1.7;
                        font-weight: 700;
}


/* 教育 アプローチ approch
---------------------------------------- */


.approach {
        margin: 120px 0 80px;
}


.app_inner {
        width: 94vw;
        margin: 0 auto;
        position: relative;
}


.app_tl {
        margin-bottom: 40px;
        text-align: center;
}


.app_tl img {
       
}


.app_sb_tl {
                position: absolute;
        top: -90px;
        right: 0;
        width: 40vw;
}


.app_tl_sb {
        background-color: var(--main-color);
        border-radius: 30px;
        padding: 10px 0;
        margin-bottom: 30px;
        color: #fff;
        font-size: 4.5vw;
        line-height: 1;
        letter-spacing: 0.02em;
        font-weight: 700;
        text-align: center;
}


.app_li {
        display: flex;
        gap: 40px;
        flex-direction: column;
}


.app_li_box {
}


.app_li_ass {
        width: 307px;
        height: 339px;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        position: relative;
        margin: 0 auto 30px;
}


.app_li_ass_01 {
        background-image: url(/scene/img/education/app_ass_01.webp);
}


.app_li_ass_02 {
        background-image: url(/scene/img/education/app_ass_02.webp);
}


.app_li_ass_03 {
        background-image: url(/scene/img/education/app_ass_03.webp);
}


.app_li_ass_04 {
        background-image: url(/scene/img/education/app_ass_04.webp);
}

.app_li_ass div {
        display: flex;
        align-items: center;
        justify-content: center;
        /* margin-top: -17px; */
        height: 75%;
}


.app_list_index {
        color: var(--main-color);
        font-size: 5vw;
        line-height: 1.4;
        letter-spacing: 0.02em;
        font-weight: 700;
        text-align: center;
}


.app_li_content {
        background-color: var(--main-bright-color);
        border-radius: 30px;
        padding: 30px 20px;
        position: relative;
}


.app_li_content::after {
        position: absolute;
        content: "";
        background-image: url(/scene/img/education/app_arrow.webp);
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        width: 45px;
        height: 78px;
        top: -50px;
        left: 0;
        right: 0;
        margin: 0 auto;
}

.app_li_content div {
        display: flex;
        flex-direction: column;
        align-items: center;
}

.app_li_con_image {
        margin-bottom: 10px;
}


.app_li_desc {
        font-size: 3.8vw;
        line-height: 1.7;
        font-weight: 700;
        text-align: left;
}


.app_blue {
        color: var(--main-color);
}


.app_red {
        color: var(--red-color);
}




/* 教育 想い mind
---------------------------------------- */
.mind {
        padding: 0 0 40px;
}


.mind_inner {
        width: 94vw;
        padding: 4vw;
        overflow: hidden;
        background: #2799FB;
        border-radius: 20px;
        margin: 0 auto 30px;
        position: relative;
        color: #fff;
        text-shadow: 0 0 5px rgba(0, 0, 0, .2);
        font-weight: 600;
        box-sizing: border-box;
}


.mind_catch {
                font-size: 5vw;
        margin-bottom: 20px;
        position: relative;
        text-align: center;
                & span {
            text-emphasis: filled var(--point-color);
        }
}


.mind_catch::after {
        position: absolute;
        content: "";
            display: block;
            background: url(/scene/img/education/mind_under.webp);
            background-position: center;
            background-size: contain;
            background-repeat: no-repeat;
            height: 10px;
            width: 85vw;
            bottom: -10px;
            left: 0;
            right: 0;
            margin: 0 auto;


}


.mind_message {
        font-size: 3.6vw;
        line-height: 1.7;
        font-weight: 700;
        padding-bottom: 110px;
}


.mind_staff_01, .mind_staff_02 {
        position: absolute;
        bottom: -160px;
        width: 140px;
        height: auto;
}


.mind_staff_01 {
        left: 0;
}


.mind_staff_02 {
        right: 0;
}


.mind ul {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 17px;
        flex-direction: column;
        margin: 0 auto 30px;
        width: 70vw;
        text-align: center;
}


.mind ul li {
        border: 2px solid var(--main-color);
        border-radius: 10px;
        padding: 15px 0;
        color: var(--main-color);
        font-size: 4vw;
        line-height: 1;
        letter-spacing: 0.02em;
        font-weight: 700;
        width: 100%;
}


.mind_closing {
                font-size: 5.5vw;
        font-weight: 600;
        text-align: center;
}










/* 教育 フォーム form
---------------------------------------- */


.education_form {
        background: #f6f6f6;
    padding: 40px 0;
}
h2.education_ttl {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-bottom: 40px;
                & img {
                        width: 40px;
                        height: auto;
            margin-bottom: 15px;
        }
                & span {
            font-size: 6vw;
            font-weight: 600;
        }
}
