/*
Theme Name: toyookalp
Theme URI: https://wordpress.org/themes/toyookalp/

 */
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family:  "arial", "hiragino-kaku-gothic-pron", sans-serif;
}
html{
    scroll-behavior: smooth;
}
a{
    text-decoration: none;
    color: black;
}
body{
    max-width: 100%;  
    margin: 0px;
    padding: 0px;
    line-height: 1.5;
}
body.no-scroll{
    overflow: hidden;
}
img{
    max-width: 100%;
    display: block;
}
@media(max-width:767px){
    .sp_size_invisible{
        display: none;
    }
}
@media(min-width:768px){
    .pc_size_invisible{
        display: none;
    }
}




#scratch{
    border: none;
    background-color: white;
    cursor: pointer;
    width: 400px;
}
#python{
    border: none;
    background-color: white;
    cursor: pointer;
    width: 400px;
}
#unity{
    border: none;
    background-color: white;
    cursor: pointer;
    width: 400px;
}
#filmora{
    border: none;
    background-color: white;
    cursor: pointer;
    width: 400px;
}
.course_img_b{
    background-color: white;
    width: 100%;
    padding-top: 30px;
    padding-bottom: 50px;
    height: 177px;
    
}

.scratch_course_box{
    width: 100%;
    background-color: #FEAD00;
    margin: 0 3%;
    text-align: center;
}
.python_course_box{
    width: 100%;
    background-color: #7ECFF6;
    margin: 0 3%;
    text-align: center;
}
.unity_course_box{
    width: 100%;
    background-color: #F4B8A8;
    margin: 0 3%;
    text-align: center;
}
.filmora_course_box{
    width: 100%;
    background-color: #73DBC3;
    margin: 0 3%;
    text-align: center;
}
.course_box{
    background-color: white;
    margin: 5px;
    text-align: left;
    padding-bottom: 10px;
    position: relative;
}
.scratch_title{
    color: white;
    font-size: 33pt;
    letter-spacing: 3px;
    padding-top: 20px;
    padding-bottom: 15px;
    font-weight: bold;
}
.python_title{
    color: white;
    font-size: 33pt;
    letter-spacing: 3px;
    line-height: 1;
    padding-top: 9px;
    padding-bottom: 4px;
    font-weight: bold;
}
.unity_title{
    color: white;
    font-size: 33pt;
    letter-spacing: 3px;
    padding-top: 20px;
    padding-bottom: 15px;
    font-weight: bold;
}
.filmora_title{
    color: white;
    font-size: 33pt;
    letter-spacing: 3px;
    padding-top: 20px;
    padding-bottom: 15px;
    font-weight: bold;
}
.course_box_upper_box{
    display: flex;
    padding-top: 30px;
    padding-left: 30px;
}
.scratch_frame{
    border: 3px solid #FEAD00;
    color: #FEAD00;
    padding: 5px 20px 5px 20px;
    font-size: 20pt;
    font-weight: bold;
    margin-right: 20px;
}
.python_frame{
    border: 3px solid #7ECFF6;
    color: #7ECFF6;
    padding: 5px 20px 5px 20px;
    font-size: 20pt;
    font-weight: bold;
    margin-right: 20px;
}
.unity_frame{
    border: 3px solid #F4B8A8;
    color: #F4B8A8;
    padding: 5px 20px 5px 20px;
    font-size: 20pt;
    font-weight: bold;
    margin-right: 20px;
}
.filmora_frame{
    border: 3px solid #73DBC3;
    color: #73DBC3;
    padding: 5px 20px 5px 20px;
    font-size: 20pt;
    font-weight: bold;
    margin-right: 20px;
}
.uppertext_s{
    font-size: 17pt;
    font-weight: bold;
    letter-spacing: 2px;
    line-height: 50px;
}
.uppertext_b{
    font-size: 28pt;
    font-weight: bold;
    letter-spacing: 2px;
}
.price-tax{
    font-size: 0.65em;
    font-weight: 600;
    letter-spacing: 0.06em;
    vertical-align: 0.12em;
}
.scratch_course_text{
    color: #FEAD00;
    padding-top: 30px;
    padding-left: 30px;
    font-size: 15pt;
    font-weight: bold;
}
.python_course_text{
    color: #7ECFF6;
    padding-top: 30px;
    padding-left: 30px;
    font-size: 15pt;
    font-weight: bold;
}
.unity_course_text{
    color: #F4B8A8;
    padding-top: 30px;
    padding-left: 30px;
    font-size: 15pt;
    font-weight: bold;
}
.filmora_course_text{
    color: #73DBC3;
    padding-top: 30px;
    padding-left: 30px;
    font-size: 15pt;
    font-weight: bold;
}
.course_text_1{
    padding-top: 15px;
    padding-left: 30px;
    padding-right: 150px;
    padding-bottom: 15px;
    font-size: 12pt;
    letter-spacing: 2px;
}
.course_text_1_filmora{
    padding-top: 15px;
    padding-left: 30px;
    padding-right: 100px;
    padding-bottom: 15px;
    font-size: 12pt;
    letter-spacing: 2px;
}
.course_text_2{
    padding-bottom: 5px;
    padding-left: 30px;
    font-size: 12pt;
    letter-spacing: 2px;
}
.course_img_1{
    width: 140px;
    bottom: 10px;
    right: 10px;
    position: absolute;
}
.course_img_2{
    width: 90px;
    bottom: 10px;
    right: 10px;
    position: absolute;
}

@media(max-width:767px) {
    .scratch_course_box{
        width: 94%;
    }
    .python_course_box{
        width: 94%;
    }
    .unity_course_box{
        width: 94%;
    }
    .filmora_course_box{
        width: 94%;
    }
    .scratch_title{
        font-size: 22pt;
    }
    .python_title{
        font-size: 22pt;
    }
    .unity_title{
        font-size: 22pt;
    }
    .filmora_title{
        font-size: 22pt;
    }
    .course_box_upper_box{
        padding-left: 15px;
        padding-top: 15px;
    }
    .scratch_frame{
        font-size: 18pt;
    }
    .python_frame{
        font-size: 18pt;
    }
    .unity_frame{
        font-size: 18pt;
    }
    .filmora_frame{
        font-size: 18pt;
    }    
    .uppertext_s{
        font-size: 15pt;
    }
    .uppertext_b{
        font-size: 23pt;
    }
    .price-tax{
        font-size: 0.62em;
    }
    .scratch_course_text{
        font-size: 12pt;
        padding-right: 90px;
        padding-left: 15px;
    }
    .python_course_text{
        font-size: 12pt;
        padding-right: 122px;
        padding-left: 15px;
    }
    .unity_course_text{
        font-size: 12pt;
        padding-right: 107px;
        padding-left: 15px;
    }
    .filmora_course_text{
        font-size: 12pt;
        padding-right: 120px;
        padding-left: 15px;
    }
    .course_text_1{
        font-size: 12pt;
        padding-right: 25px;
        padding-left: 15px;
    }
    .course_text_1_filmora{
        padding-right: 30px;
        padding-left: 15px;
    }
    .course_text_2{
        font-size: 12pt;
        padding-left: 15px;
    }
    .course_img_1{
        width: 80px;
        bottom: 150px;

    }
    .course_img_2{
        width: 70px;
        top: 190px;
    }
    .course_img_b{
        padding-top: 16px;
        padding-bottom: 24px;
        height: 100px;
    }
    #scratch{
        width: 250px;
    }
    #python{
        width: 250px;
    }
    #unity{
        width: 250px;
    }
    #filmora{
        width: 250px;
    }
}







#top{
    height: 100px;
}
header{
    top: 0;
    height: 100px;
    width: 100%;
    display: flex;
    justify-self:  center;
    background-color: white;
    position: fixed;
    z-index: 3;
}
.header_logo{
    width: 80px;
    margin: 10px 20%;
}
.sp_header_menu{
    display: none;
}
.header_text{
    width: calc(100% - 34% - 120px);
    display: flex;
    gap: 4%;
    margin: auto 0;
    margin-left: 60px;
    font-size: 11pt;
    font-weight: bold;
    letter-spacing: 2px;
}
.header_sns_img{
    width: 30px;
    margin: auto 10px;
    text-align: left;
}
.header_img{
    width: 18%;
    margin: auto 10px;
}
.sp_menu{
    display: none;
}
.pc_top_img{
    width: 100%;
    vertical-align: bottom;
}
.sp_top_img{
    display: none;
}
.top_img_flex{
    display: flex;
    width: 100%;
}
.top_img_flex a img{
    width: 100%;
}
#about{
    padding-top: 100px;
}
.about{
    width: 100%;
    background-image: url(./背景/ABOUT＿背景png.png);
    background-repeat: no-repeat;
    background-size: 100%;
    padding-bottom: 100px;
    }
.about .title{
    width: 18%;
    padding-top: 100px;
    margin: 0 auto;
}
.title_h{
    padding-top: 30px;
    font-size: 10pt;
    text-align: center;
    padding-bottom: 50px;
    letter-spacing: 2px;
}
.about_p{
    padding: 0 17%;
    font-size: 13.5pt;
    letter-spacing: 1px;
    line-height: 1.8;
}
#news{
    padding-top: 100px;
}
.news{
    width: 100%;
    background-color: #0BADCA;
}
.news .title{
    width: 15%;
    padding-top: 100px;
    margin: 0 auto;
}
.news_boxs{
    width: 50%;
    padding-bottom: 100px;
    margin: 0 auto;
}
.news_box{
    padding-bottom: 15px;
    padding-top: 15px;
    display: flex;
    align-items: center;
    font-size: 13pt;
    color: white;
    letter-spacing: 2px;
    gap: 20px;
    background-image: url(./お知らせ_下線.webp);
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: 100%;
}
.news_box_txt{
    margin-left: 10%;
    flex-shrink: 0;
    font-weight: 700;
}
.news_box_event{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 5.8em;
    min-height: 2.1em;
    padding: 0.35em 0.9em;
    border-radius: 999px;
    white-space: nowrap;
    flex-shrink: 0;
    font-size: 0.8em;
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1;
    color: #21445B;
    border: 1px solid transparent;
}
.news_box_event p{
    margin: 0;
    line-height: 1;
}
.news_box_event.-event{
    background-color: #F6DF8B;
    border-color: #F6DF8B;
}
.news_box_event.-info{
    background-color: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.45);
    color: white;
}
.news_box_title{
    flex: 1;
    min-width: 0;
}
/* .news_button{
    display: none;
} */
#point{
    padding-top: 100px;
}
.point{
    width: 100%;
    background-color: #82D6E4;
    padding-bottom: 100px;
}
.point .title{
    width: 15%;
    padding-top: 100px;
    margin: 0 auto;
}
.sp_point_img{
    display: none;
}
.point_box{
    display: flex;
    padding: 0 100px;
}
.point_content{
    background-color: white;
    width: 260px;
    margin: 0 auto;
}
.point_c_h{
    font-size: 8pt;
    padding: 20px 10% 0;
    text-align: center;
    letter-spacing: 1px;
}
.point_c_p{
    font-size: 12.5pt;
    padding: 20px 10% 20px;
    text-align: left;
    letter-spacing: 1px;
}
#convention{
    padding-top: 100px;
}
.convention{
    width: 100%;
    background-image: url(./背景/大会背景_上.png), url(./背景/大会背景_下.png);
    background-position: top left, bottom right;
    background-repeat: no-repeat;
    background-size: 40%;
    padding: 0 100px;
}
.convention .title{
    padding-top: 100px;
    width: 40%;
    margin: 0  auto;
}
.convention1{
    width: fit-content;
    display: flex;
    gap: 40px;
    padding: 0 10%;
}
.convention_medal{
    width: 18%;
    z-index: 2;
}
.convention1_h{
    margin:30px auto;
    font-size: 40px;
    letter-spacing: 5px;
    background-image: url(./グラデーション線.webp);
    background-size: calc(100% - 19px) 10px;
    background-repeat: no-repeat;
    background-position: left bottom;
}
.convention1_p{
    width: 550px;
    margin-top: 30px;
    font-size: 16px;
    letter-spacing: 1px;
}
.convention1_img{
    z-index: 1;
    margin-top: -32px;
    padding:0 10%;
}
.convention2{
    max-width: 100%;
    margin-top: 50px;
    display: flex;
}
.convention2_img{
    width: 65%;
    padding-left: 50px;
    margin-bottom: 50px;
}
.convention2_text{
    width: 100%;
    padding-right: 10%;

}
.convention2_h{
    margin-top: 150px;
    font-size: 16pt;
    letter-spacing: 3px;
    text-align: left;
}
.convention2_p{
    margin-top: 30px;
    font-size: 12pt;
    letter-spacing: 1px;
    text-align: left;
}
#course{
    padding-top: 200px;
}
#course .title{
    width: 20%;
    margin: 0 auto;
}
.course_boxs{
    display: flex;
    width: 100%;
    margin: 0 auto;
    padding: 0;
}
/* .course_img{
    width: 100%;
    margin: 0 3%; 
}*/
/* .course_img img{
    width: 1048px;
    height: fit-content;
} */


.course_img_under{
    width: 100%;
    padding-top: 7px;
    padding-bottom: 100px;
}
#teacher_interview{
    padding-top: 100px;
}
.teacher_interview{
    padding-bottom: 60px;
    width: 100%;
    background-image: url(./背景/講師紹介_背景.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;

}
.teacher_interview .title{
    padding-top: 100px;
    width: 50%;
    margin: 0 auto;
}
.teacher_interview_box{
    background-color: transparent;
    width: 80%;
    margin: 0 10% 100px;
    display: flex;
    flex-direction: column;
}
.teacher_interview_eng{
    font-size: 18pt;
    width: auto;
    margin: 0;
    position: absolute;
    left: 10px;
    top: 24px;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: none;
    letter-spacing: 1px;
    color: white;
    z-index: 2;
    line-height: 1;
}
.teacher_interview_text{
    width: auto;
    margin: 24px 0 40px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
.teacher_interview_img{
    width: 100%;
    position: relative;
    background-color: #0BADCA;
    padding-left: 80px;
}
.teacher_interview_img img{
    width: 100%;
    height: auto;
}
.teacher_interview_txt{
    margin-bottom: 30px;
    letter-spacing: 2px;
    color: black;
}
.teacher_interview_txt_p{
    padding-top: 25px;
}
.teacher_interview_profile{
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid rgba(0, 0, 0, 0.15);
}
.teacher_interview_profile_block h3{
    font-size: 18pt;
    margin-bottom: 10px;
}
.teacher_interview_history{
    list-style: none;
    margin: 0;
    padding: 0;
}
.teacher_interview_history li{
    display: grid;
    grid-template-columns: 96px 1fr;
    gap: 0 14px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    align-items: start;
}
.teacher_interview_history li:last-child{
    border-bottom: none;
}
.teacher_interview_history span{
    font-weight: 700;
    letter-spacing: 1px;
    font-size: 17px;
    line-height: 1.5;
}
.teacher_interview_history p{
    margin: 0;
    font-size: 16px;
    line-height: 1.5;
}
.teacher_interview_profile_list{
    margin: 16px 0 0;
}
.teacher_interview_profile_list div{
    display: grid;
    grid-template-columns: 96px 1fr;
    gap: 8px 14px;
    padding: 10px 0;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}
.teacher_interview_profile_list dt{
    font-weight: 700;
    font-size: 16px;
    line-height: 1.5;
}
.teacher_interview_profile_list dd{
    margin: 0;
    font-size: 16px;
    line-height: 1.5;
}
#students_voice{
    padding-top: 100px;
}
.students_voice{
    width: 100%;
    background-image: url(./背景/生徒の声背景.png);
    background-size: 100%;
    background-repeat: repeat;
    padding-bottom: 100px;
}
.students_voice .title{
    padding-top: 150px;
    width: 50%;
    margin: 0 auto;
}
.students_voice_h{
    font-size: 20pt;
    text-align: center;
    letter-spacing: 1px;
}
.students_voice_p{
    font-size: 13pt;
    text-align: center;
    padding-top: 50px;
    letter-spacing: 2px;
}
.students_voice_boxs{
    display: flex;
    margin: 0 5%;
}
.students_voice_box{
    width: 100%;
    padding-top: 50px;
    margin: 0 5%;
}
.students_voice_box_1{
    padding-top: 30px;
    font-size: 18pt;
    letter-spacing: 1px;
}
.students_voice_box_2{
    padding-top: 10px;
    font-size: 22pt;
    letter-spacing: 1px;
}
.students_voice_box_3{
    padding-top: 30px;
    font-size: 12pt;
    letter-spacing: 1px;
}
.students_voice_img_box{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    padding-top: 50px;
    margin: 0 5%;
}
#faq{
    padding-top: 100px;
}
.faq{
    background-color: #FCF5E4;
    padding-bottom: 100px;
}

.faq .title{
    width: 12%;
    min-width: 100px;
    padding-top: 100px;
    margin: 0 auto;
}
#q1{
    height: 50px;
    display: flex;
    background-color: #FEAD00;
    border: none;
    width: 80%;
    margin: 0 auto;
}
#q2{
    height: 50px;
    display: flex;
    background-color: #FEAD00;
    border: none;
    width: 80%;
    margin: 10px auto 0;
}
#q3{
    height: 50px;
    display: flex;
    background-color: #FEAD00;
    border: none;
    width: 80%;
    margin: 10px auto 0;
}
.q1_a{
    display: none;
    height: auto;
    background-color: #FFF0D0;
    border: none;
    width: 80%;
    margin: 0 auto;
    opacity: 0;
    transform: translateY(-100%);
    transition: all 1s ease;
}
.q1_a.is-active{
    display: flex;
    transform: translateY(0);
    opacity: 1;
}
.q2_a{
    display: none;
    height: auto;
    background-color: #FFF0D0;
    border: none;
    width: 80%;
    margin: 0 auto;
}
.q2_a.is-active{
    display: flex;
}
.q3_a{
    display: none;
    height: auto;
    background-color: #FFF0D0;
    border: none;
    width: 80%;
    margin: 0 auto;
}
.q3_a.is-active{
    display: flex;
}
.q_q{
    color: white;
    font-size: 26pt;
    margin: auto 2%;
}
.q_p{
    color: white;
    font-size: 20pt;
    margin: auto 3%;
}
.sankaku{
    width: 0;
    border-top: 18px solid white;
    border-right: 13px solid transparent;
    border-left: 13px solid transparent;
    margin: auto;
    margin-right: 3%;
}
.q_a{
    font-size: 30pt;
    margin: 20px 2%;
}
.q_a_p{
    font-size: 18pt;
    margin: 20px 5% ;
    letter-spacing: 3px;
}

#trial_lesson{
    padding-top: 100px;
    width: 100%;
    margin-bottom: 100px;
}
#trial_lesson .title{
    width: 40%;
    padding-top: 100px;
    margin: 0 auto;
}
.trial_lesson_h{
    font-size: 25pt;
    text-align: center;
    letter-spacing: 2px;
}
.trial_lesson_p{
    padding-top: 30px;
    margin: 0 15%;
    font-size: 18pt;
    text-align: left;
    letter-spacing: 1px;
}
.pc_trial_lesson_img{
    width: 70%;
    margin: 0 auto;
    padding-top: 50px;
}
.sp_trial_lesson_img{
    display: none;
}
.trial_lesson_b{
    width: 30%;
    padding-top: 50px;
    margin: 0 auto;
}
#bottom{
    width: 100%;
    padding-top: 100px;
    background-color: #FFEA91;
}
.bottom_box{
    display: flex;
    margin: 0 10%;
    justify-content: space-between;
}

.bottom_map_box{
    display: flex;
    margin: 0 10%;
    justify-content: center;
    gap: 40px;
}
.map{
    width: min(100%, 720px);
}
.access{
    padding-top: 50px;
    padding-bottom: 20px;
    font-size: 20pt;
    margin-left: 10%;
}

.map iframe{
    width: 100%;
    height: 420px;
    border: none;
}
.map_p{
    padding-top: 20px;
    font-size: 12pt;
    text-align: center;
    letter-spacing: 2px;
}
.bottom_sns_box{
    width: 100%;
    display: flex;
    padding-top: 30px;
    padding-bottom: 50px;
    justify-content: flex-end;
    padding-right: 10%;
    gap: 40px;
}
.bottom_img{
    height: auto;
    width: 200px;
}
.bottom_img img{
    max-width: 200%;
    width: 110%;
}
.bottom_buttom2{
    margin-top: -1px;
}
.bottom_buttom3{
    margin-top: -2px;
    border: none;
    background-color: transparent;
}
#text{
    display: none;
}
footer{
    font-size: 12pt;
    width: 100%;
    height: 50px;
    line-height: 50px;
    background-color: #0BADCA;
    text-align: center;
    letter-spacing: 2px;
    color: white;
}

#scratch:hover{
    opacity: 0.6;
}
.scratch_close{
    cursor: pointer;
    display: grid;
    place-items: center;
}
.scratch_close span{
    width: 60px;
    height: 5px;
    background-color: white;
    grid-area: 1/1/-1/-1;
}
.scratch{
    background-color: white;
    display: none;
    padding: 0 18%;
}
.scratch.is-active{
    --color: #FEAD00;
    width: 100%;
    height: 100vh;
    display: block;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 4;
    overflow: hidden;
}


#python:hover{
    opacity: 0.6;
}
.python_close{
    cursor: pointer;
    display: grid;
    place-items: center;
}
.python_close span{
    width: 60px;
    height: 5px;
    background-color: white;
    grid-area: 1/1/-1/-1;
}
.python{
    background-color: white;
    padding: 0 18%;
    display: none;
}
.python.is-active{
    --color: rgb(125, 125, 233);
    width: 100%;
    height: 100vh;
    display: block;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 4;
}

#unity:hover{
    opacity: 0.6;
}
.unity_close{
    cursor: pointer;
    display: grid;
    place-items: center;
}
.unity_close span{
    width: 60px;
    height: 5px;
    background-color: white;
    grid-area: 1/1/-1/-1;
}
.unity{
    background-color: white;
    padding: 0 18%;
    display: none;
}
.unity.is-active{
    --color: #F4B8A8;
    width: 100%;
    height: 100vh;
    display: block;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 4;
}

#filmora:hover{
    opacity: 0.6;
}
.filmora_close{
    cursor: pointer;
    display: grid;
    place-items: center;
}
.filmora_close span{
    width: 60px;
    height: 5px;
    background-color: white;
    grid-area: 1/1/-1/-1;
}
.filmora{
    background-color: white;
    padding: 0 18%;
    display: none;
}
.filmora.is-active{
    --color: rgb(200, 142, 238);
    width: 100%;
    height: 100vh;
    display: block;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 4;
}



.course_intr_h{
    display: flex;
    width: 100%;
    height: 90px;
    line-height: 90px;
    font-size: 13pt;
    color: white;
    letter-spacing: 2px;
    background-color: var(--color);
    justify-content: space-between;
    padding: 0 100px;
}

.course_intr_h span:nth-child(1){
    rotate: 135deg;
}
.course_intr_h span:nth-child(2){
    rotate: -135deg;
}
.course_intr_box{
    margin: 0 10% 50px;
}
.course_intr_p{
    font-size: 18pt;
    letter-spacing: 2px;
    padding: 40px 0;
}
.course_intr_img_box{
    height: 220px;
    display: flex;
    justify-content: space-between;
}
.course_intr_img_2{
    padding-top: 30px;
    padding-bottom: 30px;
}
.top_button{
    place-items: center;
    position: fixed;
    bottom: 50px;
    right: 50px;
    display: none;
    width: 100px;
    height: 100px;
    background-color: white;
    border: 2px solid #05AECA;
    border-radius: 50%
}
.top_button:hover{
    opacity: 0.6;
}
.top_button.is-active{
    display: grid;
}
.top_button span{
    display: block;
    height: 5px;
    width: 35%;
    background-color: black;
    grid-area: 1/1/-1/-1;
}
.top_button span:nth-child(1){
    rotate: 45deg;
    translate: 10px 0;
}
.top_button span:nth-child(2){
    rotate: -45deg;
    translate: -10px 0;
}

@media screen and (max-width: 768px){
    #top{
        height: 60px;
    }
    header{
        justify-content: space-between;
        width: 100%;
        height: 60px;
        background-color: white;
    }
    .header_logo{
        width: 45px;
    }
    .header_text{
        display: none;
    }
    .header_sns_img{
        display: none;
    }
    .header_img{
        display: none;
    }
    .sp_header_menu{
        display: grid;
        border: none;
        cursor: pointer;
        width: 35px;
        aspect-ratio: 1;
        background-color: transparent;
        place-items: center;
        margin-right: 4%;
    }
    .sp_header_menu span{
        display: block;
        width: 100%;
        height: 2px;
        background-color: #05AECA;
        grid-area: 1/1/-1/-1;
    }
    .sp_header_menu span:nth-child(2){
        translate: 0 10px;
    }
    .sp_header_menu span:nth-child(3){
        translate: 0 -10px;
    }
    .sp_menu{
        display: none;
        background-color: white;
    }
    .sp_menu.is-active{
        display: block;
        position: fixed;
        width: 100%;
        height: 100vh;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        overflow-y: auto;
        z-index: 3;
        overscroll-behavior: contain;
    }
    .sp_menu_head{
        width: 100%;
        display: flex;
        justify-content: space-between;
    }
    .sp_menu_box{
        margin: 0 4%;
        line-height: 40px;
        font-size: 11pt;
        letter-spacing: 1px;
        display: flex;
        border-bottom: 1px solid #82D6E4;
        justify-content: space-between;
    }
    .sp_menu_close{
        margin-right: 4%;
        display: grid;
        cursor: pointer;
        width: 40px;
        aspect-ratio: 1;
        background-color: transparent;
        place-items: center;
    }
    .sp_menu_close span{
        display: block;
        width: 100%;
        height: 2px;
        background-color: #05AECA;
        grid-area: 1/1/-1/-1;
    }
    .sp_menu_close span:nth-child(1){
        rotate: -135deg;
    }
    .sp_menu_close span:nth-child(2){
        rotate: 135deg;
    }
    .sp_menu_icon{
        display: grid;
        /* border: none; */
        width: 40px;
        aspect-ratio: 1;
        background-color: transparent;
        place-items: center;
    }
    .sp_menu_icon span{
        display: block;
        width: 10px;
        height: 2px;
        background-color: #82D6E4;
        grid-area: 1/1/-1/-1;
    }
    .sp_menu_icon span:nth-child(1){
        rotate: 115deg;
        translate: 0 4px;
    }
    .sp_menu_icon span:nth-child(2){
        rotate: -115deg;
        translate: 0 -4px;
    }
    .sp_menu_img{
        width: 70%;
        padding-top: 15px;
        margin: 0 auto;
    }
    .sp_menu_sns{
        display: flex;
        justify-content: right;
        margin-right: 4%;
        gap: 15px;
        padding-bottom: 20px;
    }
    .sp_menu_sns_img{
        width: 50px;
    }
    .pc_top_img{
        display: none;
    }
    .sp_top_img{
        display: block;
        width: 100%;
    }
    #about{
        padding-top: 24px;
    }
    .about{
        padding-bottom: 56px;
        margin-top: 0px;
        width: 100%;
        background-image: url(SP用/背景/ABOUT.png);
    }
    .about .title{
        padding-top: 56px;
        width: 30%;
    }
    .title_h{
        font-size: 6pt;
        padding-top: 16px;
        padding-bottom: 24px;
    }
    .about_p{
        font-size: 13pt;
        padding: 0 5%;
    }
    #news{
        padding-top: 24px;
    }
    .news{
        width: 100%;
    }
    .news .title{
        width: 30%;
        padding-top: 56px;
    }
    .news_boxs{
        width: 90%;
        padding-bottom: 30px;
    }
    .news_box{
        font-size: 8pt;
        padding-bottom: 10px;
        padding-top: 10px;
        letter-spacing: 1px;
        gap: 12px;
        align-items: flex-start;
    }
    .news_box_txt{
        margin-left: 10px;
    }
    .news_box_event{
        min-width: 5.6em;
        min-height: 2rem;
        padding: 0.25em 0.8em;
        font-size: 0.95em;
        margin-top: 1px;
    }
    .news_box_title{
        line-height: 1.6;
    }
    /* .news_button{
        width: 40%;
        height: 40px;
        font-size: 12pt;
        letter-spacing: 2px;
        border-radius: 10px;
        color: #0BADCA;
        margin: 30px auto 0;
        display: block;
        background-color: white;
        border: none;
    } */

    #point{
        padding-top: 24px;
    }
    .point{
        padding-bottom: 40px;
    }
    .point .title{
        width: 30%;
        padding-top: 56px;
    }
    .point_box{
        display: block;
        padding: 0 4%;
    }
    .point_content{
        width: 100%;
        margin: 16px auto;
    }
    .point_c_h{
        padding: 20px 10px 0;
        font-size: 7.5pt;
    }
    .point_c_p{
        font-size: 12pt;
        padding: 20px 10px 20px;
    }
    #convention{
        padding-top: 24px;
    }
    .convention{
        width: 100%;
        padding: 0;
        margin-bottom: 0;
    }
    .convention .title{
        width: 70%;
        padding-top: 56px;
    }
    .convention_medal{
        width: 120px;
    }
    .convention1{
        width: 100%;
        padding: 0 4%;
        justify-content: center;
    }
    .convention1_h{
        width: 100%;
        margin: 0;
        font-size: 17pt;
        letter-spacing: 1px;
    }
    .convention1_p{
        width: 100%;
        font-size: 10pt;
        margin-left: -24px;
    }
    .convention1_img{
        width: 100%;
        margin-top: 16px;
        padding: 0;
    }
    .convention2{
        flex-direction: column;
        margin-top: 24px;
    }
    .convention2_text{
        order:1;
        padding: 0 4%;
    }
    .convention2_h{
        font-size: 8pt;
        margin-top: 0;
        letter-spacing: 1px;
        text-align: center;
    }
    .convention2_img{
        order:2;
        width: 50%;
        margin-bottom: 0;
        margin-top: 16px;
        padding-left: 16px;
    }
    #course{
        padding-top: 80px;

    }
    #course .title{
        width: 30%;
    }
    .course_boxs{
        display: block;
        padding: 0;
    }
    .course_img_under{
        padding-top: 26px;
        padding-bottom: 50px;
    }
    #teacher_interview{
        padding-top: 24px;
    }
    .teacher_interview{
        padding-bottom: 0;
    }
    .teacher_interview .title{
        width: 80%;
        padding-top: 56px;
    }
    .teacher_interview_box{
        background-color: rgba(0,0,0,0);
        flex-direction: column;
        margin:0;
        width: 100%;
    }
    .teacher_interview_text{
        width: 92%;
        margin: 16px auto 0;
        order: 2;
    }
    .teacher_interview_txt{
        color: black;
        margin-bottom: 56px;
    }
    .teacher_interview_profile{
        margin-top: 18px;
        padding-top: 18px;
    }
    .teacher_interview_profile_block h3{
        font-size: 14pt;
        margin-bottom: 10px;
    }
    .teacher_interview_history li{
        grid-template-columns: 82px 1fr;
        gap: 0 12px;
        padding: 8px 0;
    }
    .teacher_interview_history span{
        font-size: 12pt;
    }
    .teacher_interview_history p{
        font-size: 11.5pt;
        line-height: 1.55;
    }
    .teacher_interview_profile_list{
        margin-top: 16px;
    }
    .teacher_interview_profile_list div{
        grid-template-columns: 88px 1fr;
        gap: 0 12px;
        padding: 10px 0;
    }
    .teacher_interview_profile_list dt{
        font-size: 11.5pt;
    }
    .teacher_interview_profile_list dd{
        font-size: 11pt;
        line-height: 1.55;
    }
    .teacher_interview_img{
        order: 1;
        display: block;
        width: 100%;
        background-color: #0BADCA;
        padding-left: 40px;
    }
    .teacher_interview_eng{
        position: absolute;
        left: 10px;
        top: 24px;
        color: white;
    }
    #students_voice{
        padding-top: 24px;
    }
    .students_voice{
        padding-bottom: 56px;
    }
    .students_voice .title{
        width: 80%;
        padding-top: 56px;
    }
    .students_voice_h{
        font-size: 9pt;
    }
    .students_voice_p{
        margin: 0 4%;
    }
    .students_voice_boxs{
        display: block;
    }
    .students_voice_box{
        width: fit-content;
        padding-top: 24px;
        padding-bottom: 8px;
    }
    .students_voice_box_1{
        font-size: 15pt;
        padding-top: 16px;
    }
    .students_voice_box_3{
        font-size: 10pt;
        padding-top: 16px;
    }
    .students_voice_img_box{
        gap: 30px;
        margin: 0;
    }
    
    #faq{
        padding-top: 24px;
    }
    .faq{
        width: 100%;
        padding-bottom: 56px;
    }
    .faq .title{
        padding-top: 56px;
    }
    #q1{
        width: 92%;
    }
    #q2{
        width: 92%;
    }
    #q3{
        width: 92%;
    }
    .q1_a{
        width: 92%;
    }
    .q2_a{
        width: 92%;
    }
    .q3_a{
        width: 92%;
    }
    .q_p{
        font-size: 13pt;
    }
    .q_a_p{
        font-size: 12pt;
    }
    #trial_lesson{
        padding-top: 24px;
        margin-bottom: 0;
    }
    #trial_lesson .title{
        width: 80%;
        padding-top: 56px;
    }
    .trial_lesson_h{
        font-size: 11pt;
    }
    .trial_lesson_p{
        font-size: 11pt;
        padding-bottom: 22px;
    }
    .pc_trial_lesson_img{
        display: none;
    }
    .sp_trial_lesson_img{
        display: block;
        width: 92%;
        margin:0 auto 24px;
        padding-top: 34px;
    }
    .trial_lesson_b{
        padding-top: 0;
        width: 65%;
        padding-bottom: 56px;
    }
    #bottom{
        margin-top: 0;
        padding-top: 24px;
    }
    .bottom_img{
        width: 40%;
    }
    .bottom_img img{
        width: 90%;
    }
    .bottom_buttom{
        width: 50%;
    }
    .access{
        padding-top: 30px;
        padding-bottom: 16px;
        margin-left: 10%;
        font-size: 16pt;
    }
    .bottom_map_box{
        display: block;
        margin: 0 10%;
    }
    .map iframe{
        width: 100%;
        height: 320px;
    }
    .map_p{
        padding-top: 16px;
        padding-bottom: 24px;
    }
    .bottom_sns_box{
        padding-top: 6px;
        padding-bottom: 16px;
        gap: 20px;
    }
    .bottom_sns_img{
        width: 30px;
    }
    footer{
        font-size: 8pt;
    }
    .scratch{
        padding: 0;
    }
    .python{
        padding: 0;
    }
    .unity{
        padding: 0;
    }
    .filmora{
        padding: 0;
    }
    .course_intr_h{
    height: 50px;
    line-height: 50px;
    font-size: 8pt;
    padding: 0 4%;
    }
    .course_intr_box{
        margin: 0 4%;
    }
    .course_intr_p{
        font-size: 11pt;
        padding: 10px 0;
    }
    .course_intr_img_box{
        display: block;
    }
    .course_intr_img_box{
        display: block;
        justify-content: left
    }
    .course_intr_img_1{
        margin: 0 4%;
    }
    .course_intr_img_2{
        width: 110px;
        margin-top: -50px;
        padding-top: 0;
        padding-bottom: 0;
    }
    .scratch_close span{
        width: 35px;
    }
    .python_close span{
        width: 35px;
    }
    .unity_close span{
        width: 35px;
    }
    .filmora_close span{
        width: 35px;
    }
    .top_button{
    bottom: 15px;
    right: 15px;
    width: 50px;
    height: 50px;
    }
    .top_button span{
        height: 2px;
        width: 35%;
        grid-area: 1/1/-1/-1;
    }
    .top_button span:nth-child(1){
        rotate: 45deg;
        translate: 5px 0;
    }
    .top_button span:nth-child(2){
        rotate: -45deg;
        translate: -5px 0;
    }
}
@media screen and (max-width: 425px){
    .convention1{
    gap: 0px;
}
}

/* 以下お知らせ投稿用 */

#news_content{
    width: 100%;
}
.news_content{
    width: 100%;
}
.news_content .title{
    width: 15%;
    padding-top: 24px;
    margin: 0 auto;
}
.news_content_img{
    width: 40%;
    margin: 0 auto;
    padding-top: 60px;
    padding-bottom: 50px;
}
.news_content_textbox{
    margin-bottom: 50px;
    margin-left: 250px;
    font-size: 12pt;
    line-height: 1.5;
    letter-spacing: 2px;
}
.news_content_title{
    font-size: 19pt;
    color: #FEAD00;
    font-weight: bold;
}
.news_content_text{
    margin-top: 18px;
    line-height: 1.7;
}
.news_content_button{
    display: flex;
    background-color: #FEAD00;
    border: none;
    margin: 0 auto 100px;
    border-radius: 50px;
    --b_color : white;
    --border1 : 8px;
    --border2 : 10px
}
.news_content_button :hover{
    --b_color: #FEAD00;
    --border1 : 10px;
    --border2 : 13px;
    background-color: #FFD680;
    border-radius: 50px;
}
.news_content_button_content{
    font-size: 13pt;
    color: var(--b_color);
    display: flex;
    margin: 10px 55px 10px 70px;
    gap: 10px;
}
.news_content_button_sankaku{
    width: 0;
    border-style: solid;
    border-top: var(--border1) solid transparent;
    border-bottom: var(--border1) solid transparent;
    border-left: var(--border2) solid var(--b_color);
    border-right: 0;
    margin: auto 10px;
}
@media(max-width:767px) {
    .news_content .title{
        width: 30%;
        padding-top: 0px;
    }
    .news_content_img{
        width: 85%;
        padding-bottom: 30px;
    }
    .news_content_textbox{
        margin-bottom: 56px;
        margin-left: 30px;
        font-size: 9pt;
        margin-right: 30px;
    }
    .news_content_button{
        margin-bottom: 56px;
        --border1 : 6px;
        --border2 : 8px
    }
    .news_content_button_content{
        font-size: 10pt;
        margin: 8px 5px 6px 25px;
    }
    .news_content_button :hover{
        display: none;
    }
}

.trial_lesson_page{
    background: linear-gradient(180deg, #fffdf5 0%, #ffffff 28%, #f8fbff 100%);
}
.trial_hero{
    padding: 130px 0 80px;
}
.trial_hero_inner{
    width: min(860px, calc(100% - 48px));
    margin: 0 auto;
    display: block;
}
.trial_hero_eyebrow,
.trial_section_kicker,
.trial_final_cta_lead{
    font-family: "arial", sans-serif;
    letter-spacing: 0.18em;
    color: #00a7c4;
}
.trial_hero_copy h1{
    margin-top: 16px;
    font-size: clamp(30px, 4.4vw, 56px);
    line-height: 1.2;
    color: #0f3557;
}
.trial_hero_copy{
    text-align: center;
}
.trial_hero_text{
    margin-top: 24px;
    font-size: 17px;
    line-height: 2;
    color: #444;
}
.trial_hero_points{
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
    justify-content: center;
}
.trial_hero_points span,
.trial_recommend_item{
    border-radius: 999px;
    background: #fff;
    border: 1px solid #ffd36d;
    color: #0f3557;
    font-weight: 700;
}
.trial_hero_points span{
    padding: 10px 18px;
}
.trial_cta_button{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 30px;
    padding: 18px 34px;
    border-radius: 999px;
    background: linear-gradient(135deg, #ffb100 0%, #ff8d2b 100%);
    color: #fff;
    font-size: 17px;
    font-weight: 700;
    box-shadow: 0 20px 40px rgba(255, 173, 0, 0.22);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.trial_cta_button:hover{
    transform: translateY(-2px);
    box-shadow: 0 24px 44px rgba(255, 173, 0, 0.28);
}
.trial_content_wrap{
    width: min(1120px, calc(100% - 48px));
    margin: 0 auto 120px;
}
.trial_summary_box{
    margin: 0 auto 70px;
    max-width: 860px;
    padding: 42px 48px;
    border-radius: 28px;
    background: #fff;
    box-shadow: 0 20px 50px rgba(12, 52, 88, 0.08);
}
.trial_flyer_box{
    margin-top: 28px;
}
.trial_flyer_box img{
    display: block;
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
    border-radius: 20px;
    box-shadow: 0 18px 44px rgba(15, 53, 87, 0.12);
}
.trial_section{
    margin-top: 72px;
}
.trial_section_head{
    margin-bottom: 28px;
}
.trial_section_head h2{
    margin-top: 12px;
    font-size: clamp(25px, 3vw, 38px);
    line-height: 1.35;
    color: #0f3557;
}
.trial_feature_grid,
.trial_info_cards,
.trial_flow{
    display: grid;
    gap: 22px;
}
.trial_feature_grid{
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.trial_feature_card,
.trial_info_card,
.trial_flow_step,
.trial_access_box{
    background: #fff;
    border-radius: 24px;
    box-shadow: 0 18px 44px rgba(15, 53, 87, 0.08);
}
.trial_feature_card,
.trial_info_card{
    padding: 28px 24px;
}
.trial_feature_card h3,
.trial_lesson_text h3,
.trial_info_card h3,
.trial_access_text h3,
.trial_flow_step h3{
    color: #0f3557;
    font-size: 22px;
}
.trial_feature_card p,
.trial_lesson_text p,
.trial_info_card p,
.trial_access_text p,
.trial_flow_step p,
.trial_final_cta p{
    margin-top: 14px;
    line-height: 1.9;
    color: #444;
}
.trial_recommend_list{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}
.trial_recommend_item{
    padding: 20px 22px;
    line-height: 1.7;
}
.trial_lesson_block,
.trial_access_box{
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 0.9fr);
    gap: 28px;
    align-items: center;
}
.trial_lesson_block{
    grid-template-columns: 1fr;
}
.trial_lesson_text{
    max-width: 820px;
    margin: 0 auto;
    padding: 36px 40px;
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 18px 44px rgba(15, 53, 87, 0.08);
}
.trial_info_cards{
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.trial_inline_cta{
    margin-top: 42px;
    text-align: center;
}
.trial_access_box{
    padding: 28px;
}
.trial_access_map iframe{
    width: 100%;
    min-height: 320px;
    border: none;
    border-radius: 20px;
}
.trial_flow{
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.trial_flow_step{
    padding: 28px 24px;
}
.trial_flow_step span{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #0f3557;
    color: #fff;
    font-weight: 700;
}
.trial_flow_step h3{
    margin-top: 18px;
}
.trial_final_cta{
    margin-top: 72px;
}
.trial_final_cta_inner{
    padding: 44px 36px 50px;
    border-radius: 28px;
    background: linear-gradient(135deg, #0f3557 0%, #1b5a80 100%);
    text-align: center;
}
.trial_final_cta_inner h2{
    margin-top: 14px;
    color: #fff;
    font-size: clamp(26px, 3.3vw, 42px);
    line-height: 1.35;
}
.trial_final_cta_inner p{
    color: rgba(255, 255, 255, 0.92);
}
.trial_final_cta_inner .trial_cta_button{
    margin-top: 26px;
}
.trial_final_cta_lead{
    color: #ffd36d;
}

@media(max-width: 980px){
    .trial_hero_inner,
    .trial_access_box,
    .trial_feature_grid,
    .trial_info_cards,
    .trial_flow{
        grid-template-columns: 1fr;
    }
    .trial_recommend_list{
        grid-template-columns: 1fr;
    }
}

@media(max-width:767px) {
    .trial_hero{
        padding: 110px 0 56px;
    }
    .trial_hero_inner,
    .trial_content_wrap{
        width: calc(100% - 28px);
    }
    .trial_hero_copy h1{
        font-size: 34px;
    }
    .trial_hero_text{
        font-size: 15px;
    }
    .trial_hero_text br{
        display: none;
    }
    .trial_cta_button{
        width: 100%;
        padding: 16px 20px;
        font-size: 15px;
    }
    .trial_summary_box{
        padding: 28px 20px;
        margin-bottom: 52px;
    }
    .trial_flyer_box{
        margin-top: 22px;
    }
    .trial_section{
        margin-top: 54px;
    }
    .trial_section_head h2{
        font-size: 28px;
    }
    .trial_feature_card,
    .trial_info_card,
    .trial_flow_step,
    .trial_access_box{
        border-radius: 20px;
    }
    .trial_lesson_text{
        padding: 26px 20px;
        border-radius: 20px;
    }
    .trial_access_box{
        padding: 20px;
    }
    .trial_access_map iframe{
        min-height: 240px;
    }
    .trial_final_cta_inner{
        padding: 34px 18px 40px;
    }
}