@charset "UTF-8";
/* ===================================================================
CSS
 file name  :  eas.css
=================================================================== */
@media screen and (min-width: 769px) {
    .eas_about_flex{
        display: flex;
        justify-content: space-between;
        margin-top: 60px;
    }
    .eas_about_flex.direction{
        flex-direction: row-reverse;
    }
    .eas_about_flex .text,
    .eas_about_flex .image{
        width: 48%;
    }
}
.eas_about_flex h3{
    color: #24ADB4;
    font-size: 2.0rem;
}
.eas_about_flex .text p{
    margin-top: 1em;
}
@media screen and (min-width: 481px) {
    .lead_text.pc_center{
        text-align: center;
    }
}
.course_box{
    margin: 50px auto auto;
    border-radius: 10px;
    padding: 50px 60px;
}
@media screen and (min-width: 769px) {
    .course_box.course1{
        border: 2px solid #367A44;
    }
    .course_box.course2{
        border: 2px solid #0F2B7C;
    }
    .course_box.course3{
        border: 2px solid #CF5532;
    }
}
.course_box .course_name{
    font-weight: bold;
}
.course_box.course1 .course_name{
    color: #367A44;
}
.course_box.course2 .course_name{
    color: #0F2B7C;
}
.course_box.course3 .course_name{
    color: #CF5532;
}
@media screen and (min-width: 769px) {
    .course_box .course_name span{
        font-size: 2.6rem;
        margin-right: 20px;
    }
}
.course_box p{
    margin-top: 30px;
}
.course_box .saas_price{
    margin-top: 30px;
}
.course_contact_btn{
    margin: 40px auto auto;
    max-width: 600px;
}
.course_contact_btn .btn{
    font-size: 2.0rem;
}
@media screen and (min-width: 769px) {
    .eas_merit_list{
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        padding-top: 30px;
    }
     .eas_merit_list li{
         width: 33.333%;
         padding: 30px 2.5% 0 2.5%;
         display: flex;
    }
}
.eas_merit_list li > div{
    background: #F0F9FB;
    border-radius: 10px;
    padding: 30px 30px;
}
.eas_merit_list li .title{
    text-align: center;
    color: #24ADB4;
    font-size: 1.8rem;
}
.eas_merit_list li p{
    margin-top: 1em;
}
@media screen and (min-width: 769px) {
    .eas_case_list{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        padding-top: 30px;
    }
    .eas_case_list li{
        width: 48%;
        margin-top: 30px;
    }
}
.eas_case_list li{
    background: #F8F8F8;
    padding: 30px 40px;
}
.eas_case_list li .title{
    font-weight: bold;
}
.eas_case_list li .title span{
    color: #24ADB4;
}
.eas_case_list li p{
    margin-top: 1em;
}
ul.eas_voice_list{
    max-width: 780px;
    margin: auto;
    padding-top: 30px;
}
ul.eas_voice_list li{
    display: flex;
    justify-content: space-between;
    margin: 40px auto auto;
}
ul.eas_voice_list li.direction{
    flex-direction: row-reverse;
}
ul.eas_voice_list li .voice_person{
    width: 140px;
    padding-right: 40px;
}
ul.eas_voice_list li.direction .voice_person{
    width: 140px;
    padding-right: 0px;
    padding-left: 40px;
}
ul.eas_voice_list li .voice{
    width: calc(100% - 140px);
    background: #F0F9FB;
    padding: 30px;
    border-radius: 10px;
    line-height: 2;
}
.eas_comment{
    margin-top: 50px;
    text-align: center;
}
@media screen and (max-width: 768px) {
    .eas_about_flex{
        margin-top: 30px;
    }
    .eas_about_flex h3{
        font-size: 1.2rem;
    }
    .eas_about_flex .image{
        max-width: 480px;
        margin: 20px auto auto;
    }
    .course_box{
        margin: 30px auto auto;
        border-radius: 0px;
        padding: 20px 0px;
    }
    .course_box.course1{
        border-top: 2px solid #367A44;
        border-bottom: 2px solid #367A44;
    }
    .course_box.course2{
        border-top: 2px solid #0F2B7C;
        border-bottom: 2px solid #0F2B7C;
    }
    .course_box.course3{
        border-top: 2px solid #CF5532;
        border-bottom: 2px solid #CF5532;
    }
    .course_box .course_name{
        line-height: 2
    }
    .course_box .course_name span{
        font-size: 1.8rem;
    }
    .course_box p{
        margin-top: 1em;
    }
    .course_box .saas_price{
        margin: 20px auto auto;
        max-width: 640px;
    }
    .course_contact_btn{
        margin: 20px auto auto;
        max-width: 300px;
    }
    .course_contact_btn .btn{
        font-size: 1.2rem;
    }
    .eas_merit_list{
        max-width: 480px;
        margin: auto;
    }
     .eas_merit_list li{
         margin-top: 20px;
    }
    .eas_merit_list li > div{
        border-radius: 5px;
        padding: 20px 20px;
    }
    .eas_merit_list li .title{
        font-size: 1.2rem;
    }
    .eas_case_list{
        max-width: 480px;
        margin: auto;
    }
    .eas_case_list li{
        margin-top: 20px;
    }
    .eas_case_list li{
        padding: 20px 20px;
    }
    ul.eas_voice_list{
        max-width: 480px;
        padding-top: 0px;
    }
    ul.eas_voice_list li{
        margin: 30px auto auto;
    }
    ul.eas_voice_list li .voice_person{
        width: 70px;
        padding-right: 10px;
    }
    ul.eas_voice_list li.direction .voice_person{
        width: 70px;
        padding-right: 0px;
        padding-left: 10px;
    }
    ul.eas_voice_list li .voice{
        width: calc(100% - 70px);
        padding: 10px 20px;
        border-radius: 5px;
    }
    .eas_comment{
        max-width: 480px;
        margin: 30px auto auto;
        text-align: left;
    }
}