/* ----------------------------------------
education
---------------------------------------- */
.sec_tl {
        font-size: 30px;
        font-weight: 700;
        text-align: center;
        letter-spacing: 0.02em;
        line-height: 50px;
}
.under_yellow {
        background: linear-gradient(transparent 60%, var(--point-color) 60%);
}
.tl_yellow {
        color: var(--point-color);
}
.tl_dot {
        background-position: top 12px 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;
}
/* SNS メイン main
---------------------------------------- */
.main {
        background: var(--main-color);
        padding: 10px 0 100px;
        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) 0 0 no-repeat;
        width: 420px;
        height: 270px;
        top: -60px;
        left: 60px;
        position: absolute;
        content: "";
}
.main::after {
        background: url(/scene/img/common/main_shape02.webp) 0 0 no-repeat;
        width: 490px;
        height: 280px;
        bottom: -100px;
        right: 60px;
        position: absolute;
        content: "";
}
.main_inner {
        width: 1200px;
        height: 550px;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: relative;
        z-index: 1;
}
.main_box {
        position: relative;
        z-index: 1;
}
.main_sb_catch {
        font-size: 44px;
        line-height: 52px;
        font-weight: 700;
        color: #fff;
        letter-spacing: 0.05em;
        margin-bottom: 19px;
}
.main_tl {
        margin-bottom: 34px;
}


.main_catch_txt {
        color: #fff;
        padding-left: 10px;
        margin-bottom: 30px;
        font-size: 17px;
        font-weight: 500;
        letter-spacing: 0.02em;
        text-shadow: 0 0 10px rgba(0, 0, 0, 0.2)
}
.main_catch_contact {
        display: flex;
        gap: 20px;
}
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 {
        padding-bottom: 100px;
}
.main_chara {
        position: absolute;
        bottom: -40px;
        right: 210px;
}
/* education 課題 assign
---------------------------------------- */
.assign {
        width: 1200px;
        background: #fff;
        margin: -60px auto 60px;
        padding: 50px 0;
        position: relative;
        z-index: 1;
        box-sizing: border-box;
        border-radius: 50px;
}
.assign .sec_tl {
        margin-bottom: 40px;
}


.ass_li {
        display: flex;
        flex-wrap: wrap;
        gap: 50px 40px;
        width: 1100px;
        margin: 0 auto 100px;
}


.ass_li li {
                    position: relative;
            width: 240px;
            height: 240px;
            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: 17px;
                position: relative;
                z-index: 1;
                width: 230px;
                height: 55px;
                margin: 45px auto 0;
}


.ass_li li img {
                        position: absolute;
                top: 0;
                left: 0;
}


.ass_onayami_catch {
                font-size: 32px;
        font-weight: 600;
        display: flex;
        flex-direction: column;
        align-items: center;
}


.ass_onayami_catch span {
        display: inline-block;
}


.ass_onayami_catch span::after {
                    content: "";
            display: block;
            background: url(/scene/img/education/ass_under.webp);
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
            height: 20px;
            width: 100%;
}


.ass_onayami_chara {
                position: absolute;
        bottom: 0;
        right: 190px;
}




/* education 特徴 features
---------------------------------------- */
.features {
margin-top: 200px;
        padding-bottom: 80px;
        background: var(--main-bright-color);
        position: relative;
                &:before {
            background: url(/scene/img/common/bg_wave_top.webp) 50% 0 no-repeat;
            top: -160px;
            left: 0;
        }
                &::before {
            content: "";
            display: block;
            position: absolute;
            width: 100%;
            height: 160px;
        }
}
.fea_arrow {
        position: absolute;
        width: 36px;
        top: -193px;
        left: calc(50% - 18px);
}


.features h2 {
        text-align: center;
        margin-bottom: 110px;
}


.fea_chara {
        position: absolute;
        top: -40px;
        left: calc(50% - 600px);
}


.fea_list {
        display: flex;
        justify-content: center;
        gap: 45px;
        margin-bottom: 45px;
}


.fea_list li {
                width: 370px;
        background: #fff;
        border-radius: 20px;
        box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
        box-sizing: border-box;
        padding: 35px 0;
        position: relative;
        z-index: 1;
}


.fea_li_number {
                background: var(--main-color);
        width: 90px;
        height: 90px;
        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: 35px;
        }
}


.fea_li_tl {
                font-size: 24px;
        color: var(--main-color);
        font-weight: 600;
        text-align: center;
        line-height: 32px;
                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: 16.5px;
                        line-height: 25px;
                        font-weight: 700;
                        padding: 0 27px;
}


/* education アプローチ approch
---------------------------------------- */


.approach {
        margin: 141px 0 152px;
}


.app_inner {
        width: 1200px;
        margin: 0 auto;
        position: relative;
}


.app_tl {
        margin-bottom: 72px;
        text-align: center;
}


.app_tl img {
}


.app_sb_tl {
                position: absolute;
        top: -70px;
        right: calc(50% - 570px);
}


.app_tl_sb {
        background-color: var(--main-color);
        border-radius: 30px;
        padding: 15px 0;
        margin-bottom: 64px;
        color: #fff;
        font-size: 28px;
        line-height: 1;
        letter-spacing: 0.02em;
        font-weight: 700;
        text-align: center;
}


.app_li {
        display: flex;
        width: 1200px;
        justify-content: space-between;
        flex-wrap: wrap;
        row-gap: 16px;
}


.app_li_box {
       width: 562px;
}


.app_li_ass {
        width: 307px;
        height: 339px;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        position: relative;
        margin: 0 auto 50px;
}


.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: 24px;
        line-height: 32px;
        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 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: -60px;
        left: 0;
        right: 0;
        margin: 0 auto;
}


.app_li_content div {
        box-sizing: border-box;
        display: flex;
        align-items: flex-start;
        gap: 15px;
}


.app_li_content img {
        display: block;
        width: 173px;
}


.app_li_desc {
        font-size: 17px;
        line-height: 30px;
        font-weight: 700;
}


.app_blue {
        color: var(--main-color);
}


.app_red {
        color: var(--red-color);
}




/* education 想い mind
---------------------------------------- */
.mind {
        padding: 0 0 80px;
}


.mind_inner {
        max-width: 1705px;
        height: 800px;
        overflow: hidden;
        background: url(/scene/img/education/mind_bg.webp) 50% 0 no-repeat;
        margin: 0 auto 37px;
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        color: #fff;
        text-align: center;
        text-shadow: 0 0 5px rgba(0, 0, 0, .2);
        font-weight: 600;
}


.mind_catch {
        font-size: 30px;
        margin: 60px 0;
        position: relative;
                & 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: 22px;
            width: 773px;
            bottom: -20px;
            left: 0;
            right: 0;
            margin: 0 auto;


}


.mind_message {
        font-size: 20px;
        line-height: 32px;
        letter-spacing: 0.02em;
        font-weight: 700;
        padding-bottom: 140px;
}


.mind_staff_01, .mind_staff_02 {
        position: absolute;
        bottom: 20px;
}


.mind_staff_01 {
        right: calc(50% + 470px);
}


.mind_staff_02 {
        left: calc(50% + 470px);
}


.mind ul {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 30px;
        gap: 17px;
}


.mind ul li {
        border: 2px solid var(--main-color);
        border-radius: 10px;
        padding: 15px;
        color: var(--main-color);
        font-size: 32px;
        line-height: 1;
        letter-spacing: 0.02em;
        font-weight: 700;
}


.mind_closing {
        color: #000;
        font-size: 32px;
        line-height: 55px;
        letter-spacing: 0.02em;
        font-weight: 700;
        text-align: center;
}






/* 教育 フォーム form
---------------------------------------- */


.education_form {
        background: #f6f6f6;
    padding: 80px 0;
}
h2.education_ttl {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-bottom: 50px;
                & img {
            margin-bottom: 15px;
        }
                & span {
            font-size: 32px;
            font-weight: 600;
        }
}
