@charset "utf-8";
/* CSS Document */

/*------------------------------
teacher_point
------------------------------*/

.teacher_point{
    width: 100%;
}

.teacher_point .inner{
    background: url("/teacher/img/img_teachers.png") no-repeat top center;
    width: 100%;
    position: relative;
    padding-top: 22%;
}
@media screen and (max-width: 1280px) {
    .teacher_point .inner{
        background-size: 100% auto;
        padding-top: 25%;
    }
}
.teacher_point .inner::before{
    position: absolute;
    inset: 0;
    content: "";
    background: url("/teacher/img/point_bg.png") no-repeat left 80px;
    background-size: cover;
    z-index: -1;
}

.teacher_point .point_list{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    width: 80%;
    max-width: 1000px;
    margin: 0 auto;
}
.teacher_point .point_list li{
    position: relative;
    padding: 75px 30px 20px;
    border-top: 4px solid #D19CE4;
    background: linear-gradient(136deg, #666 26%, #444 80%), #F8F8FA;
    color: #FFF;
    text-align: center;
    font-style: normal;
    font-weight: 700;
    font-size: 20px;
    line-height: 1.6;
}
.teacher_point .point_list li::before{
    position: absolute;
    top: 15px;
    left: 50%;
    margin-left: -24px;
    content: "";
    width: 48px;
    height: 53px;
    background: url("/teacher/img/ico_check.png") no-repeat center center;
    background-size: contain;
}
.teacher_point .teacher_point_txt{
    font-size: 16px;
    line-height: 1.8;
    width: 80%;
    max-width: 1000px;
    margin: 40px auto 0;
}


/*------------------------------
gray_bg
------------------------------*/
.gray_bg{
    background: url(/teacher/img/gray_bg.png) no-repeat;
    background-size: cover;
    background-position: left 350px;
}
.teacher_cap{
    margin-top: 40px;
    text-align: center;
    font-weight: bold;
    color: #fff;
    font-size: 24px;
    line-height: 1.8;
}
.teacher_list{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    width: 80%;
    max-width: 1000px;
    margin: 0 auto;
}
.teacher_list li{
    background: #fff;
}
.teacher_list .teacher_list_head{
    display: grid;
    grid-template-columns: 220px 1fr;
}
.teacher_list .teacher_list_head .teacher_img{
}
.teacher_list .teacher_list_head .teacher_info{
    padding: 25px 25px 0;
}
.teacher_list .teacher_list_head .teacher_info dl + dl{
    margin-top: 20px;
    padding-top: 10px;
    border-top: 1px solid #ccc;
}
.teacher_list .teacher_list_head .teacher_info dl:not(:first-child) dt{
    font-size: 14px;
    font-weight: bold;
}
.teacher_list .teacher_list_head .teacher_info dl:first-child dt{
    font-size: 18px;
    font-weight: bold;
}

.teacher_list .teacher_list_head .teacher_info dl dd{
    margin-top: 5px;
}
.teacher_list .teacher_list_head .teacher_info dl:not(:first-child) dd{
    font-size: 14px;
  color: #662F7A;
}

.teacher_list .teacher_list_head .teacher_info dl .teacher_name{
    font-family: Roboto;
    color: #662F7A;
    font-size: 32px;
    font-weight: bold;
}
.teacher_list .teacher_txt{
    padding: 25px;
    font-size: 16px;
    line-height: 1.8;
}


@media screen and (max-width: 768px) {

  
/*------------------------------
共通
------------------------------*/
img{
    width: 100%;
    height: auto;
}

/*------------------------------
teacher_point
------------------------------*/

.teacher_point{
    width: 100%;
}
 
.teacher_point .inner{
    background: url("/teacher/img/img_teachers.png") no-repeat top center;
    background-size: contain;
    padding-top: 120px;
}
.teacher_point .inner::before{
    position: absolute;
    inset: 0;
    content: "";
    background: url("/teacher/img/point_bg_sp.png") no-repeat top center;
    background-size: 100%;
    z-index: -1;
}
.teacher_point .point_list{
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    width: 90%;
    margin: 0 auto;
}
.teacher_point .point_list li{
    padding: 15px 0 15px 40px;
    font-size: 18px;
    text-align: left;
  }
.teacher_point .point_list li::before {
    position: absolute;
    top: 10px;
    left: 5px;
    margin-left: 0;
    content: "";
    width: 38px;
    height: 42px;
    background-size: 50%;
  }

.teacher_point .teacher_point_txt {
    font-size: 14px;
    width: 80%;
    margin: 30px auto 0;
}

/*------------------------------
teacher_list
------------------------------*/  
    
.gray_bg{
    background: url(/teacher/img/gray_bg_sp.png) no-repeat bottom center;
    background-size: 100%;
}

.teacher_cap{
    width:90%;
    margin: 20px auto 0;
    font-size: 16px;
}
    
.teacher_list{
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    width: 90%;
    max-width: inherit;
    margin: 0 auto;
}
.teacher_list li{
    width: 100%;
}
.teacher_list .teacher_list_head{
    display: grid;
    grid-template-columns: 50% 1fr;
}
.teacher_list .teacher_list_head .teacher_info{
    padding: 15px 15px 0;
}
.teacher_list .teacher_list_head .teacher_info dl + dl {
    margin-top: 10px;
    padding-top: 10px;
}
.teacher_list .teacher_list_head .teacher_info dl:not(:first-child) dt{
    font-size: 14px;
}
.teacher_list .teacher_list_head .teacher_info dl:first-child dt{
    font-size: 14px;
}
.teacher_list .teacher_list_head .teacher_info dl:not(:first-child) dd{
    font-size: 14px;
}
.teacher_list .teacher_list_head .teacher_info dl .teacher_name{
    font-size: 24px;
}
.teacher_list .teacher_list_head .teacher_info dl dd{
    margin-top: 3px;
}
.teacher_list .teacher_txt{
    padding: 15px;
    font-size: 14px;
}


}