@charset "utf-8";

#bdash-reception-window-close-detector{
    visibility: hidden;
}

section *{
    box-sizing: border-box;
    line-height: 1;
}

.msg_container,
.experience_container,
.explanation_container,
.privilege_container,
.learning_container{
    margin-left: auto;
    margin-right: auto;
    /* max-width: 1260px; */
}

/* 共通 */
.swiper{
    overflow: visible;
}
.swiper-wrapper{
    z-index: 0;
}

.btn_wrap{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 8%;
    margin-left: auto;
    margin-right: auto;
    width: 77%;
}

.btn_inner{
    width: 47%;
    position: relative;
}

.btn_img{
    display: block;
    width: 100%;
    height: auto;
}

.btn_icon{
    display: block;
    width: 71%;
    height: auto;
    position: absolute;
    top: -125%;
    left: 50%;
}

.btn_annot{
    color: #0d16a9;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(10px, 1.2vw, 15px);
    font-weight: 700;
    line-height: 1.6;
    width: 100%;
    position: absolute;
    top: 90%;
    left: 50%;
    transform: translateX(-50%);
}

/* ローディング */
.loading_container{
    background-color: #ffa4b0;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2000;
}
.loading_container_cover{
    background-color: #ffa4b0;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    right: 0;
    z-index: 2001;
}
.loading_start{
    width: 45%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.loading_start_text{
    width: 50%;
    position: absolute;
    top: 57%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
}

/* mv */
.section_mv{
    overflow: hidden;
    position: relative;
}
.mv_title{
    color: #7cccff;
    font-size: clamp(10px, 1.6vw, 20px);
    font-weight: 700;
    white-space: nowrap;
    position: absolute;
    top: 3%;
    left: 53%;
    transform: translateX(-50%);
}

.mv_copy,
.mv_logo,
.mv_icon{
    opacity: 0;
    transform: translateY(20px);
    /* opacity: 1; */
}

.mv_copy{
    display: block;
    width: 12%;
    height: auto;
    position: absolute;
    top: 8%;
    left: 12%;
    transform: translateY(20px);
    z-index: 0;
}

.mv_logo{
    display: block;
    width: 50%;
    height: auto;
    position: absolute;
    bottom: 12%;
    left: 50%;
    transform: translateX(-50%);
}

.mv_icon{
    display: block;
    width: 20vw;
    height: 20vw;
    position: absolute;
    bottom: 16%;
    right: 2%;
}
.mv_icon_bg{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}
.mv_icon_text{
    position: absolute;
    top: 48%;
    left: 29%;
    width: 55%;
}

/* msg */
.section_msg{
    background-color: #0d16a9;
    /* padding-top: 6.5%; */
    position: relative;
    top: -1px;
}

.msg_bg_top{
    display: block;
    position: relative;
    margin-top: -10%;
    width: 100%;
}
.msg_top_wrap{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-left: auto;
    margin-right: auto;
    width: 85%;
    position: absolute;
    top: 10%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.msg_top_wrap_inner{
    width: 48.5%;
    position: relative;
}

.msg_container{
    display: flex;
    align-items: center;
    flex-direction: column;
    padding-top: 45%;
    padding-bottom: 20%;
}
.msg_top_wrap_inner_l{
    opacity: 0;
    position: absolute;
    left: 3%;
    z-index: 1;
}
.msg_top_wrap_inner_r{
    opacity: 0;
    position: absolute;
    right: 3%;
    z-index: 0;
}

.msg_text_wrap{
    margin-left: 5%;
}

.msg_text{
    color: #fff;
    font-size: clamp(10px, 1.3vw, 16px);
    font-weight: 500;
    letter-spacing: .16em;
    line-height: 3;
    /* margin-top: 7%; */
}
.msg_text sup{
    display: inline-block;
    font-size: 10px;
    margin-left: -1%;
    margin-right: -1%;
    transform: scale(.6);
    padding-right: 10px;
}

.msg_main_text{
    width: 85%;
    margin-top: 5%;
}

.msg_annot{
    color: #fff;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .16em;
    margin-top: 3%;
}

.msg_img{
    display: block;
    margin-top: 10%;
    width: 100%;
    height: auto;
}

.msg_btn_setsumei{
    position: absolute;
    top: 91%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40%;
}
.msg_btn_taiken{
    position: absolute;
    top: 91%;
    left: 51%;
    transform: translate(-50%, -50%);
    width: 40%;
}

/* explanation */
.section_explanation{
    background-color: #7cccff;
    /* padding-top: 6.5%; */
    padding-bottom: 30%;
    position: relative;
}

.explanation_icon{
    display: block;
    width: 23%;
    height: auto;
    position: absolute;
    top: 16.5%;
    right: 10%;
}
.explanation_icon_sp{
    display: none;
}

.explanation_bg_icon01{
    width: 10%;
    position: absolute;
    top: -9.5%;
    left: 25%;
}
.explanation_bg_icon02{
    width: 7.5%;
    position: absolute;
    top: -8%;
    right: 12%;
}
.explanation_bg_icon03{
    display: block;
    width: 4%;
    position: absolute;
    top: 0%;
    left: 13%;
}
.explanation_bg_icon04{
    display: block;
    width: 6%;
    position: absolute;
    top: 6%;
    right: 9%;
}

.explanation_title{
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 60%;
    height: auto;
    padding-left: 5%;
}
.explanation_head{
    color: #0d16a9;
    /* font-size: clamp(10px, 2.1vw, 32px); */
    font-size: 32px;
    font-weight: 700;
    letter-spacing: .16em;
    line-height: 1.9;
    /* width: 70%; */
    margin: 3% auto 0;
    text-align: center;
}
.explanation_head_marker{
    background: linear-gradient(to top,#fff 50%, transparent 50%);
    padding: 0 1%;
}

.explanation_info_wrap{
    display: flex;
    align-items: center;
    margin-top: 3.5%;
    margin-left: 18%;
}

.explanation_info_icon{
    aspect-ratio: 1 / 1;
    background-color: #fff;
    border-radius: 50%;
    color: #ed92ba;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(10px, 1.3vw, 16px);
    font-weight: 700;
    letter-spacing: .1em;
    line-height: 1.4;
    width: 10.5%;
}

.explanation_info_text{
    color: #0d16a9;
    font-size: clamp(10px, 1.3vw, 16px);
    font-weight: 700;
    letter-spacing: .1em;
    line-height: 2;
}

.explanation_feature_wrap{
    display: block;
    margin-top: 10%;
    margin-left: auto;
    margin-right: auto;
    width: 80%;
}

.explanation_feature_inner{
    width: 90%;
    position: relative;
    display: flex;
    margin: auto;
}

.explanation_feature_imgarea{
    width: 50%;
}
.explanation_feature_img{
    display: block;
    width: 100%;
    height: auto;
}

.explanation_feature_list{
    width: 50%;
    border-bottom-left-radius: 40px;
    border-bottom-right-radius: 40px;
    padding-bottom: 7%;
    position: relative;
}
.explanation_feature_title{
    width: 95%;
    margin-left: 3%;
}

.explanation_feature_theme{
    display: flex;
    align-items: center;
    margin-left: 3%;
    color: #0d16a9;
}
.explanation_feature_line:nth-child(n+2){
    margin-top: 2%;
}
.explanation_feature_line{
    position: relative;
    height: 3px;
    margin: 5% 0;
    background-image: linear-gradient(to right, #0d16a9, #0d16a9 6px, transparent 6px);
    background-size: 10px 3px;
    background-position: left bottom;
    background-repeat: repeat-x;
}
.explanation_feature_theme.title{
    color: yellow;
    justify-content: center;
    font-size: clamp(10px, 1.4vw, 18px);
    font-weight: bold;
    background: #0d16a9;
    width: 45%;
    height: 40px;
    border-radius: 40px;
    position: absolute;
    top: -10%;
    left: 0;
}
.explanation_feature_inner:nth-child(2) .explanation_feature_line.title{
    border-color: #ffff44;
    color: #ffff44;
}
.explanation_feature_themearea{
    position: relative;
    margin: 10% 0 0 2%;
    padding: 10% 0 8%;
    background: #fff;
    border-radius: 2vw;
}

.explanation_feature_text{
    color: #0d16a9;
    font-size: clamp(10px, 1.4vw, 18px);
    font-weight: 700;
    letter-spacing: .12em;
    line-height: 1.75;
    margin-left: 4%;
    margin-bottom: 3%;
}
.explanation_feature_text_marker{
    background: linear-gradient(to top,#ffff44 50%, transparent 50%);
}

.explanation_feature_icon{
    display: block;
    width: 15%;
    height: auto;
    position: absolute;
    top: -6%;
    left: -4%;
}

.explanation_feature_inner.kougakunen{
    flex-direction: row-reverse;
}
.explanation_feature_icon.kougakunen{
    left: 90%;
}
.explanation_feature_title.kougakunen {
    margin-left: 0;
    margin-right: 3%;
}
.explanation_feature_themearea.kougakunen {
    margin: 10% 2% 0 0;
    padding: 10% 0 6%;
}

.section_explanation .btn_wrap{
    margin-left: auto;
    margin-right: auto;
    margin-top: 20%;
    width: 36%;
}

.section_explanation .btn_inner{
    width: 100%;
}

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

.section_explanation .btn_annot{
    color: #0d16a9;
    top: 115%;
}

/* privilege */
.privilege_top_bg{
    width: 105%;
    position: relative;
    display: block;
    margin-top: -15%;
    margin-left: auto;
    margin-right: auto;
    transform: scale(1.1);
}
.section_privilege{
    background-color: #cdcece;
    padding-top: 6%;
    padding-bottom: 65%;
    position: relative;
}
.privilege_container{
    position: absolute;
    top: -30%;
    left: 0;
}

.privilege_title{
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 90%;
    height: auto;
}

.privilege_img{
    display: block;
    margin-top: 4%;
    margin-left: auto;
    margin-right: auto;
    width: 77%;
    height: auto;
}

.privilege_annot{
    color: #0d16a9;
    font-size: clamp(10px, 1.1vw, 14px);
    font-weight: 700;
    margin-top: 2%;
    margin-left: 13%;
}

.section_privilege .btn_wrap{
    margin-left: auto;
    margin-right: auto;
    margin-top: 15%;
    width: 36%;
}
.section_privilege .btn_inner {
    width: 100%;
}

.section_privilege .btn_annot{
    color: #0d16a9;
    top: 115%;
}

/* experience */
.experience_top_bg{
    display: block;
    position: relative;
    width: 105%;
    margin-top: -10%;
    margin-left: auto;
    margin-right: auto;
    transform: scale(1.1);
}
.section_experience{
    background-color: #ffa4b0;
    /* padding-top: 9%; */
    padding-bottom: 24%;
    position: relative;
}

.experience_bg{
    display: block;
    pointer-events: none;
    width: 100%;
    height: auto;
    position: absolute;
    top: 0;
    left: 0;
}

.experience_title{
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 55%;
    height: auto;
    position: relative;
    z-index: 1;
}

.experience_head{
    color: #0d16a9;
    font-size: clamp(10px, 2.1vw, 28px);
    font-weight: 700;
    letter-spacing: .16em;
    line-height: 1.9;
    width: 70%;
    margin: 3% auto 0;
    text-align: center;
}
.experience_head_marker{
    background: linear-gradient(to top,#fff 50%, transparent 50%);
}
.experience_head_marker sup{
    font-size: 10px;
    margin-left: -.7%;
    margin-right: -.7%;
    vertical-align: text-top;
}

.experience_annot{
    color: #0d16a9;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .16em;
    margin-top: 1%;
    margin-left: 38%;
}

.experience_slide_wrap{
    margin-top: 8%;
    /* overflow: hidden; */
    margin-left: calc(50% - 50vw);
    width: 100vw;
}

.experience_slide_inner{
    width: 76%;
    position: relative;
}

.experience_slide_img{
    display: block;
    width: 100%;
    height: auto;
}

.experience_slide_info{
    width: 75%;
    position: absolute;
    top: 42%;
    left: 50%;
    transform: translateX(-50%);
}
.experience_slide_inner[data-title="Sounds Fun! 体験&説明会"] .experience_slide_info{
    top: 35%;
    left: 45%;
}

.experience_slide_text{
    color: #0d16a9;
    font-size: clamp(10px, 1.3vw, 17px);
    font-weight: 700;
    letter-spacing: .17em;
    line-height: 1.9;
}

.experience_slide_btn_title{
    color: #003cbe;
    font-size: clamp(10px, 1.1vw, 18px);
    font-weight: 900;
    letter-spacing: .17em;
    margin-top: 2%;
    margin-left: 7%;
    background: #ffff01;
    height: 30px;
    line-height: 30px;
    border-radius: 2vw;
    text-align: center;
    width: 65%;
}
.experience_slide_btn_title span{
    margin-left: 4%;
}

.experience_slide_btn_img{
    display: block;
    margin-top: 5%;
    width: 36%;
    height: auto;
}
.experience_slide_inner[data-title="Sounds Fun! 体験&説明会"] .experience_slide_btn_img{
    margin-top: 5%;
    width: 80%;
}
.experience_slide_inner[data-title="Sounds Fun! 体験&説明会"] .experience_slide_btn {
    margin-top: 5%;
    width: 50%;
}
.experience_slide_inner[data-title="特進講座1週間体験"] .experience_slide_info{
    top: 32%;
    left: 47%;
}
.experience_slide_inner[data-title="特進講座1週間体験"] .experience_slide_btn_img{
    margin-top: 14%;
}
.experience_slide_inner[data-title="魔法の国語®︎体験"] .experience_slide_info{
    top: 32%;
    left: 44%;
}
.experience_slide_inner[data-title="魔法の国語®︎体験"] .experience_slide_btn_img{
    margin-top: 7%;
}
.experience_slide_inner[data-title="今解き思考探究講座体験"] .experience_slide_info{
    top: 38%;
    left: 79%;
}
.experience_slide_inner[data-title="今解き思考探究講座体験"] .experience_slide_btn_img{
    margin-top: 10%;
    margin-left: 18%;
}
.experience_slide_inner[data-title="エディックオンライン校"] .experience_slide_info{
    top: 28%;
    left: 72%;
}
.experience_slide_inner[data-title="エディックオンライン校"] .experience_slide_text{
    display: block;
    background: #fff;
    width: fit-content;
}
.experience_slide_inner[data-title="エディックオンライン校"] .experience_slide_info_sp{
    display: none;
}
.experience_mid_bg {
    width: 100%;
    position: absolute;
    top: 22%;
    left: 0;
}
.experience_bg_icon01{
    width: 10%;
    position: absolute;
    top: -15%;
    right: 8%;
}
.experience_bg_icon02{
    width: 12%;
    position: absolute;
    top: -4%;
    left: 15%;
}
.experience_bg_icon03{
    width: 5%;
    position: absolute;
    top: 8%;
    right: 12%;
}
.experience_bg_icon04{
    width: 9%;
    position: absolute;
    top: 25%;
    left: 8%;
}

.explanation_splide_img01{
    position: absolute;
    width: 100%;
    top: 0%;
    transform: rotate(-3deg);
}
.explanation_splide_img02{
    position: absolute;
    width: 100%;
    top: 30%;
    transform: rotate(3deg);
    z-index: 3;
    margin: 5% 0 10%;
}
.explanation_splide_area{
    display: block;
    position: relative;
    width: 100%;
    /* height: 20vh; */
    margin: 5% 0;
}


/* swiper.jsのスタイル変更 */
.swiper-button-prev,
.swiper-button-next{
    top: 46%;
}
.swiper-button-prev{
    left: 6%;
    width: 50px;
    height: 50px;
}
.swiper-button-next{
    right: 6%;
    width: 50px;
    height: 50px;
}
.swiper-button-prev:after,
.swiper-button-next:after{
    content: "";
    background-size: cover;
    width: 50px;
    height: 50px;
}
.swiper-button-prev:after {
    background-image: url("../img/ny2024/slide_prev_arrow.svg");
}
.swiper-button-next:after {
    background-image: url("../img/ny2024/slide_next_arrow.svg");
}

.swiper-pagination{
    position: static;
}
.swiper-horizontal > .swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal{
    margin-top: 4%;
}
.swiper-pagination-bullet{
    background-color: #003cbe;
    border-radius: 1000px;
    opacity: .5;
    width: 2.5%;
    height: 3px;
}
.swiper-pagination-bullet-active{
    opacity: 1;
}

/* kokugo */
.section_kokugo h2{
    position: relative;
    display: block;
    text-align: center;
    padding: 0 0 50px;
    color: #0d16a9;
    font-size: clamp(10px, 1.6vw, 20px);
    font-weight: 700;
    white-space: nowrap;
}
.dokkai_top_bg{
    display: block;
    position: relative;
    width: 100%;
    margin-top: -18%;
}
.kokugo_container{
    position: relative;
}
.kokugo_slider_img{
    position: absolute;
    top: 5%;
    width: 100%;
}
.kokugo_top_bg{
    display: block;
    position: relative;
    width: 105%;
    margin-top: -26%;
    margin-left: auto;
    margin-right: auto;
    transform: scale(1.1);
}
.kokugo_mid_bg{
    display: block;
    position: absolute;
    width: 9%;
    top: 2%;
    left: 0;
}
.kokugo_mid_bg_r{
    display: block;
    position: absolute;
    width: 7%;
    top: 23%;
    right: 0;
}
.kokugo_mid_bg_l{
    display: none;
}
.section_kokugo{
    background-color: #d8d9d9;
    padding-top: 10%;
    padding-bottom: 1%;
    position: relative;
}
.kokugo_top_title{
    width: 31%;
    margin: 0 auto;
}
.kokugo_hikakuzu{
    width: 80%;
    margin: 3% auto;
}
.kokugo_dakara{
    width: 30%;
    margin: 5% auto;
}
.kokugo_doku_container{
    display: flex;
    width: 80%;
    margin: 0 auto 5%;
    justify-content: space-around;
}
.kokugo_doku_inner{
    width: 25%;
    position: relative;
}
.kokugo_doku_inner::after{
    content: "";
    border-left: 2px dotted #0036b3;
    width: 2px;
    height: 70%;
    position: absolute;
    top: 0;
    right: -18%;
    margin-top: 10%;
}
.kokugo_doku_inner:last-child::after{
    display: none;
}
.kokugo_doku_img{
    margin-top: 10%;
}
.kokugo_doku_text{
    margin-top: 10%;
}
.kokugo_doku_text02{
    width: 80%;
    margin: 10% auto 0;
}
.kokugo_bottom_text{
    width: 50%;
    margin: auto;
}
.dotted{
    width: 80%;
    margin: 5% auto;
}

/* teiki */
.teiki_container{
    position: relative;
    width: 100%;
    display: block;
    background-color: #d8d9d9;
}
.teiki_slider_img01{
    position: absolute;
    top: 6%;
    width: 100%;
}
@media screen and (max-width:768px){
    .teiki_slider_img01 {
        display: none;
    }
}
.teiki_top_title{
    width: 30%;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}
.teiki_hikakuzu{
    width: 80%;
    margin: 5% auto 0;
}
.teiki_dakara{
    width: 30%;
    margin: 2% auto;
}
.teiki_bunseki{
    width: 60%;
    margin: 3% auto;
}
.teiki_heikin{
    width: 80%;
    margin: 3% auto 15%;
}
.section_kokugo .btn_wrap{
    margin-top: 10%;
    margin-bottom: 30%;
}
.section_kokugo .btn_annot{
    top: 115%;
}

/* jisseki */
.jisseki_top_bg{
    display: block;
    position: relative;
    width: 105%;
    margin-top: -18%;
    margin-left: auto;
    margin-right: auto;
    transform: scale(1.1);
}
.jisseki_container{
    position: relative;
}
.section_jisseki{
    background-color: #0d16a9;
    padding-top: 1%;
    position: relative;
    margin-bottom: 10%;
}
.jisseki_top_bg_one_01{
    display: block;
    position: relative;
    width: 100%;
}
.jisseki_no1{
    width: 40%;
    margin: 2% auto;
}
.jisseki_container h2{
    text-align: center;
    color: #ffffff;
    padding-bottom: 50px;
    font-size: clamp(10px, 1.6vw, 20px);
    font-weight: 700;
    white-space: nowrap;
}
.jisseki_jisseki{
    width: 80%;
    margin: 0 auto 10%;
}
.jisseki_top_bg_one_02{
    display: block;
    position: relative;
    width: 100%;
}

.btn_wrap.info_area {
    margin-top: 15%;
    margin-bottom: 12%;
}
.btn_wrap.info_area .btn_annot{
    top: 115%;
}

.course ul.accordion > li > h2 {
    background: #0d16a9;
}

/* バナー */
.floating_banner_container{
    display: block;
    width: 60px;
    position: fixed;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    z-index: 1001;

    opacity: 0;
    visibility: hidden;
    transition: all .5s ease;
}
.floating_banner_container.scroll{
    opacity: 1;
    visibility: visible;
}

.floating_banner_img{
    display: block;
    width: 100%;
    height: auto;
}

/* 講座詳細ボタン */
#lp-wrap .btn_wrap{
    margin-bottom: 13%;
}

br.pc{
    display: block;
}
br.sp{
    display: none;
}














@media screen and (max-width:768px){
    /* 共通 */
    .btn_wrap{
        display: block;
        width: 90%;
        margin: 20% auto 10%;
    }

    .btn_inner{
        width: 100%;
        margin-bottom: 10%;
    }
    
    .btn_icon{
        width: 100%;
        top: -58%;
    }

    .btn_annot{
        font-size: clamp(10px, 2.6vw, 22px);
        width: 200%;
        left: -105%;
        transform: translateX(0);
    }

    /* ローディング */
    .loading_container{
        background-color: #ffa4b0;
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 2000;
    }
    .loading_container_cover{
        width: 0;
    }
    .loading_start{
        width: 80%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    .loading_start_text{
        width: 80%;
        position: absolute;
        top: 52%;
        left: 50%;
        transform: translate(-50%, -50%);
        opacity: 0;
    }

    /* mv */
    .section_mv{
        overflow: visible;
    }

    .mv_title {
        font-size: clamp(10px, 2.7vw, 22px);
        top: 2%;
    }
    .mv_copy{
        width: 22%;
        top: 3%;
        left: 4%;
    }

    .mv_logo{
        display: block;
        width: 98%;
        height: auto;
        position: absolute;
        bottom: 12%;
        left: 53%;
        transform: translateX(-50%); 
    }

    .mv_icon{
        display: none;
    }

    /* msg */
    .msg_bg_top {
        margin-top: -16%;
        width: 105%;
        margin-left: auto;
        margin-right: auto;
        transform: scale(1.1);
    }
    .section_msg{
        padding-top: 10%;
    }

    .msg_top_wrap{
        display: block;
        width: 100%;
        position: relative;
        top: 0;
        left: 0;
        transform: translate(0, 0);
        margin-top: -30%;
    }
    .msg_top_wrap_inner {
        width: 90%;
        position: relative;
        left: 0;
        margin: auto;
    }
    .msg_top_wrap_inner_r {
        right: 0;
        margin: -10% auto 0;
        z-index: 1;
    }
    .msg_container {
        padding-top: 0;
    }

    .msg_text{
        text-align: center;
        font-size: clamp(10px, 3.8vw, 31px);
        letter-spacing: .22em;
        line-height: 3.0;
        margin-top: 14%;
    }
    .msg_text sup{
        font-size: clamp(10px, 2.6vw, 22px);
        margin-left: -2%;
        margin-right: -2%;
    }
    .msg_main_text{
        width: 100%;
    }
    .msg_annot{
        font-size: clamp(10px, 2.6vw, 22px);
        margin-top: 5%;
    }

    /* experience */
    .section_experience{
        /* background-color: #e0e6f3; */
        padding-top: 5%;
        padding-bottom: 33%;
        top: -1px;
    }

    .experience_bg{
        top: -4%;
        z-index: 1;
    }
    .experience_mid_bg,
    .experience_bg_icon01,
    .experience_bg_icon02,
    .experience_bg_icon03,
    .experience_bg_icon04{
        display: none;
    }

    .experience_title{
        width: 95%;
    }

    .experience_head{
        font-size: clamp(26px, 4.2vw, 32px);
        width: 100%;
        margin-top: 5%;
        margin-left: 0%;
    }
    .experience_head sup{
        font-size: clamp(10px, 1.9vw, 16px);
        margin-left: -1.5%;
        margin-right: -1.5%;
        vertical-align: text-top;
    }

    .experience_annot{
        font-size: clamp(10px, 2.6vw, 22px);
        margin-top: 3%;
        margin-left: 15%;
        font-weight: 400;
    }

    .experience_slide_wrap{
        margin-top: 14%;
    }

    .experience_slide_info{
        display: block;
        flex-direction: column;
        width: 95%;
        top: auto;
        bottom: 35%;
    }

    .experience_slide_text{
        font-size: clamp(10px, 3.3vw, 28px);
        letter-spacing: .1em;
        line-height: 2;
        margin-top: 0%;
    }
    .experience_slide_inner[data-title="玉井式国語的算数教室®︎体験"]  .experience_slide_btn{
        position: absolute;
        top: 171%;
        left: 8%;
        width: 150%;
    }
    .experience_slide_inner[data-title="Sounds Fun! 体験&説明会"] .experience_slide_info {
        position: absolute;
        top: 50%;
        height: auto;
        left: 57%;
    }
    .experience_slide_inner[data-title="Sounds Fun! 体験&説明会"] .experience_slide_btn{
        margin-top: 0;
    }
    .experience_slide_inner[data-title="Sounds Fun! 体験&説明会"] .experience_slide_btn_img {
        margin-top: 3%;
        margin-left: -7%;
        width: 75%;
        position: absolute;
    }
    .experience_slide_inner[data-title="Sounds Fun! 体験&説明会"] .experience_slide_text {
        line-height: 1.7em;
    }

    .experience_slide_btn_title{
        font-size: clamp(10px, 2.9vw, 24px);
        margin-top: 6%;
        margin-left: 6%;
        border-radius: 4vw;
        width: 70%;
        letter-spacing: 0;
        height: 20px;
        line-height: 20px;
        font-weight: 900;
    }

    .experience_slide_btn_img{
        margin-top: 0;
        margin-left: 3%;
        width: 50%;
    }

    .experience_slide_inner[data-title="特進講座1週間体験"] .experience_slide_info {
        position: absolute;
        top: 68%;
        height: auto;
        left: 57%;
    }
    .experience_slide_inner[data-title="特進講座1週間体験"] .experience_slide_btn_img {
        margin-top: 3%;
        margin-left: 6%;
        width: 75%;
    }
    .experience_slide_inner[data-title="魔法の国語®︎体験"] .experience_slide_info {
        position: absolute;
        top: 59%;
        height: auto;
        left: 51%;
    }
    .experience_slide_inner[data-title="魔法の国語®︎体験"] .experience_slide_text {
        letter-spacing: .06em;
        line-height: 1.8;
        margin-top: 0%;
    }
    .experience_slide_inner[data-title="魔法の国語®︎体験"] .experience_slide_btn_img {
        margin-top: 3%;
        margin-left: 10%;
        width: 75%;
    }
    .experience_slide_inner[data-title="今解き思考探究講座体験"] .experience_slide_info {
        position: absolute;
        top: 66%;
        height: auto;
        left: 51%;
    }
    .experience_slide_inner[data-title="今解き思考探究講座体験"] .experience_slide_text {
        letter-spacing: .06em;
        line-height: 1.8;
        margin-top: 0%;
    }
    .experience_slide_inner[data-title="今解き思考探究講座体験"] .experience_slide_btn_img {
        margin-top: 8%;
        margin-left: 10%;
        width: 75%;
    }
    .experience_slide_inner[data-title="エディックオンライン校"] .experience_slide_info{
        display: none;
    }
    .experience_slide_inner[data-title="エディックオンライン校"] .experience_slide_info_sp{
        display: block;
        width: 100%;
        position: absolute;
        top: 12%;
        left: 10%;
    }
    .experience_slide_inner[data-title="エディックオンライン校"] .experience_slide_text{
        display: block;
        background: #fff;
        width: fit-content;
        letter-spacing: .06em;
        line-height: 1.8;
    }

    /* swiper.jsのスタイル変更 */
    .swiper-button-prev{
        left: 1%;
    }
    .swiper-button-next{
        right: 1%;
    }

    .swiper-horizontal > .swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal{
        margin-top: 7%;
    }
    .swiper-pagination-bullet{
        width: 6.5%;
        height: 5px;
    }

    /* explanation */
    .section_explanation{
        padding-bottom: 50%;
        top: -1px;
    }

    .explanation_bg{
        top: -1%;
        z-index: 1;
    }

    .explanation_title{
        width: 100%;
        padding-top: 14%;
    }
    .explanation_bg_icon01 {
        width: 25%;
        position: absolute;
        top: -2%;
        left: 62%;
    }
    .explanation_bg_icon02 {
        width: 18%;
        position: absolute;
        top: -0.5%;
        right: 75%;
    }
    .explanation_bg_icon03 {
        display: none;
    }
    .explanation_bg_icon04 {
        display: none;
    }

    .explanation_icon {
        display: none;
    }
    .explanation_icon_sp{
        display: block;
        position: relative;
        width: 97%;
        margin: 10% 0% 5% -4%;
    }

    .explanation_head {
        font-size: clamp(26px, 4.2vw, 32px);
    }
    .explanation_head_marker {
        background: linear-gradient(to top,#fff 35%, transparent 35%);
        padding: 0 1%;
    }

    .explanation_info_wrap{
        margin-top: 6%;
        margin-left: 7%;
        width: auto;
    }
    .explanation_mid_bg {
        width: 100%;
        position: absolute;
        top: 51%;
        left: 0;
    }

    .explanation_info_text{
        font-size: clamp(11px, 3.8vw, 31px);
        letter-spacing: .16em;
        margin-top: 4%;
        text-align: center;
        line-height: 2.8;
    }

    .explanation_feature_wrap {
        width: 90%;
    }
    .explanation_feature_inner{
        width: 100%;
        display: block;
    }
    .explanation_feature_imgarea {
        width: 100%;
    }
    .explanation_feature_inner:nth-child(n+2){
        margin-top: 18%;
    }

    .explanation_feature_list{
        width: 100%;
        border-bottom-left-radius: 60px;
        border-bottom-right-radius: 60px;
    }
    .explanation_feature_title {
        width: 95%;
        margin: 5% 0;
    }
    .explanation_feature_line {
        position: relative;
        height: 2px;
        margin-left: 7%;
    }
    .explanation_feature_themearea {
        margin: 13% 0 0 0%;
        padding-bottom: 0;
    }
    .explanation_feature_theme.title{
        width: 60%;
        height: 50px;
        font-size: 16px;
        letter-spacing: 2px;
        line-height: 50px;
    }
    .explanation_feature_icon.kougakunen {
        left: 66%;
    }
    .explanation_feature_themearea.kougakunen {
        margin: 10% 2% 0 0;
        padding: 10% 0 2%;
    }

    .explanation_feature_text{
        font-size: clamp(14px, 3.5vw, 24px);
        letter-spacing: 1px;
        margin-bottom: 6%;
    }

    .explanation_feature_icon{
        width: 37%;
        top: -4%;
    }

    .explanation_splide_img01{
        width: 250%;
        top: 85%;
    }
    .explanation_splide_img02{
        width: 250%;
        top: 87.5%;
        margin-top: 20%;
    }
    .explanation_splide_img02.splide--rtl{
        direction: ltr;
    }

    .section_explanation .btn_wrap{
        margin-top: 55%;
        width: 89%;
    }
    
    .section_explanation .btn_icon{
        width: 71%;
        top: -125%;
    }
    
    .section_explanation .btn_annot{
        width: 100%;
        left: 50%;
        transform: translateX(-50%);
        top: 110%;
        font-size: 12px;
        font-weight: 400;
    }

    /* privilege */
    .section_privilege{
        background: #e9eaea;
        padding-top: 14%;
        padding-bottom: 300%;
        top: -1px;
    }
    .privilege_container {
        top: -1%;
    }

    .privilege_bg{
        top: 2%;
    }

    .privilege_title{
        width: 94%;
        margin-left: 5%;
    }

    .privilege_img{
        margin-top: 11%;
        width: 89%;
    }

    .privilege_annot{
        font-size: clamp(10px, 2.6vw, 22px);
        line-height: 2;
        font-weight: 400;
        margin-top: 3%;
        margin-left: 6%;
    }

    .section_privilege .btn_wrap{
        margin-top: 40%;
        width: 89%;
    }
    .section_privilege .btn_icon {
        width: 71%;
        top: -130%;
    }
    .section_privilege .btn_annot {
        width: 100%;
        left: 50%;
        transform: translateX(-50%);
        top: 110%;
        font-size: 12px;
        font-weight: 400;
    }

    /* kokugo */
    .section_kokugo h2{
        padding: 0;
        font-size: clamp(14px, 2.7vw, 22px);
    }
    .kokugo_top_title {
        width: 90%;
        margin: 10% auto;
    }
    .kokugo_mid_bg {
        display: block;
        position: absolute;
        width: 14%;
        top: 9%;
        left: 0;
    }
    .kokugo_mid_bg_r {
        display: block;
        position: absolute;
        width: 12%;
        top: 22%;
        right: 0;
    }
    .kokugo_mid_bg_l {
        display: none;
        position: absolute;
        width: 14%;
        top: 53%;
        left: 0;
    }
    .kokugo_hikakuzu {
        width: 90%;
        margin: 3% auto;
    }
    .kokugo_dakara {
        width: 80%;
        margin: 10% auto;
    }
    .kokugo_doku_container {
        display: block;
        width: 80%;
        margin: 0 auto 5%;
    }
    .kokugo_doku_inner {
        width: 100%;
        position: relative;
        margin-bottom: 20%;
    }
    .kokugo_doku_title{
        width: 70%;
        margin: 10% auto;
    }
    .kokugo_doku_text02 {
        width: 80%;
        margin: 10% auto;
    }
    .kokugo_bottom_text {
        width: 85%;
        margin: 0 auto 10%;
    }
    .dotted {
        display: none;
    }

    .kokugo_slider_img {
        display: none;
    }

    .teiki_top_title{
        width: 85%;
        margin: 30% auto 10%;
        position: relative;
        z-index: 1;
    }
    .teiki_hikakuzu {
        width: 90%;
        margin: 10% auto 0;
        position: relative;
    }
    .teiki_dakara{
        width: 80%;
        margin: 2% auto 10%;
        position: relative;
    }
    .teiki_bunseki {
        width: 85%;
        margin: 5% auto;
        position: relative;
    }
    .teiki_heikin {
        width: 90%;
        margin: 10% auto 15%;
    }
    .section_kokugo .btn_wrap {
        margin-top: 40%;
        margin-bottom: 30%;
    }
    .section_kokugo .btn_icon {
        width: 71%;
        top: -130%;
    }
    .section_kokugo .btn_annot {
        width: 100%;
        left: 50%;
        transform: translateX(-50%);
        top: 120%;
        font-size: 12px;
        font-weight: 400;
    }
    .section_kokugo .btn_inner {
        margin-bottom: 25%;
    }
    
    /* jisseki */
    .section_jisseki {
        padding-top: 6%;
        position: relative;
        top: -1px;
    }
    .jisseki_container h2 {
        padding-bottom: 30px;
        font-size: clamp(14px, 2.7vw, 22px);
    }
    .jisseki_no1 {
        width: 75%;
        margin: 1% auto 5%;
    }

    .btn_wrap.info_area {
        margin-top: 40%;
        margin-bottom: 15%;
    }
    .btn_wrap.info_area .btn_icon {
        width: 71%;
        top: -130%;
    }
    .btn_wrap.info_area .btn_annot {
        width: 100%;
        left: 50%;
        transform: translateX(-50%);
        top: 120%;
        font-size: 12px;
        font-weight: 400;
    }
    .btn_wrap.info_area .btn_inner {
        margin-bottom: 25%;
    }
    .btn_wrap.info_area .btn_inner_taiken{
        margin-bottom: 0;
    }

    /* バナー */
    .floating_banner_container{
        width: 100%;
        top: auto;
        bottom: 0;
        right: 0;
        transform: translateY(0);
    }

    /* 講座詳細ボタン */
    #lp-wrap .btn_wrap{
        /* margin-bottom: 35%; */
        margin-bottom: 15%;
        width: 95%;
    }


    br.pc{
        display: none;
    }
    br.sp{
        display: block;
    }

    #scroolltop.show {
        bottom: 85px;
    }
}













@media screen and (max-width:500px){
    /* experience */
    /* swiper.jsのスタイル変更 */
    .swiper-button-prev{
        left: 1%;
        width: 40px;
        height: 40px;
    }
    .swiper-button-next{
        right: 1%;
        width: 40px;
        height: 40px;
    }
    .swiper-button-prev:after,
    .swiper-button-next:after{
        content: "";
        background-size: cover;
        width: 40px;
        height: 40px;
    }

    .swiper-pagination-bullet{
        height: 3px;
    }

}

/* 講座詳細 */

.course .resp-tabs-list li.ny_prpl{
    padding: 25px;
    padding-left: 5px;
    padding-right: 5px;
}

.mahou {
    width: 90%;
    margin: auto;
    display: none;
}
.mahou ul.accordion ul{
    display: block;
}
.mahou ul.accordion > li > p span{
    background-image: none;
}