img {
    max-width: 100%;
}

#system01 {
    height: 800px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: url("/img/system/system01_bg.png") center center / cover no-repeat;
    text-align: center;
}

#system01 .txt_box picture {
    margin:50px 0 15px;
}

#system01 .txt_box p {
    font-size: 1.25rem;
    color:#fff;
}

#system02 {
    padding:130px 0;
}

#system02 .cont_box {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
}

#system02 .cont_box .cont {
    width: 50%;
}

#system02 .cont_box .cont p {
    font-size: 1.125rem;
    color:#363636;
    margin:30px 0;
}

#system02 .cont_box .cont:last-child {
    margin:28px 0;
}

#system03 {
    height: 830px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: url("/img/system/system03_bg.png") center center / cover no-repeat;
}

#system03 ol {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin:0;
    padding:0;
    margin-top: 80px;
}

#system03 ol li {
    width: 20%;
    text-align: center;
}

#system03 ol li .txt_box {
    margin-top: 30px;
}

#system03 ol li .subject {
    display: block;
    font-size: 2.25rem;
    font-weight: 700;
    color:#fff;
}

#system03 ol li .context {
    display: block;
    font-size: 1.125rem;
    color:#b1c9f9;
}

#system04 {
    height: 800px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: url("/img/system/system04_bg.png") center center / cover no-repeat;
    text-align: center;
}

#system04 ol {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    list-style: none;
    margin:0;
    padding:0;
    margin-top: 80px;
}

#system04 ol li {
    width: 23.5%;
    background: #fff;
    padding:30px 25px;
    border-radius: 4px;
}

#system04 ol li .step {
    display: block;
    font-size: 1.25rem;
    font-weight: 700;
    color:#256ffc;
    margin-bottom: 10px;
}

#system04 ol li .img_box {
    margin:5px 0;
}

#system04 ol li .txt_box .subject {
    font-size: 1.5rem;
    font-weight: 600;
    color:#171c61;
}

#system04 ol li .txt_box .context {
    font-size: 1.125rem;
    color:#171c61;
    line-height: 1.4;
    margin-top: 20px;
}

#system05 {
    height: 924px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: url("/img/system/system05_bg.png") center center / cover no-repeat;
    text-align: center;
}

#system05 ol {
    list-style: none;
    margin:0;
    padding:0;
    margin-top: 60px;
}

#system05 ol li {
    display: flex;
    align-items: center;
    background: #f5f4f3;
    border-radius: 8px;
    padding:25px;
}

#system05 ol li:not(:last-child) {
    margin-bottom: 20px;
}

#system05 ol li .txt_box {
    font-size: 1.25rem;
    color:#363636;
    margin-left: 8px;
}

#system05 ol li .txt_box p span {
    font-weight: 600;
}

@media all and (max-width:991px){
    html {
        font-size: 14px;
    }
    
    #system01 {
        height: auto;
        padding:150px 0;
    }

    #system02 .cont_box .cont {
        width: 100%;
        text-align: center;
    }

    #system03 {
        height: auto;
        padding:120px 0;
    }

    #system03 ol {
        margin-top: 30px;
    }

    #system03 ol li {
        width: 100%;
        padding:30px 0;
    }

    #system03 ol li:not(:last-child){
        border-bottom:1px solid rgba(255,255,255, 0.5)
    }

    #system03 ol li .txt_box {
        margin-top: 10px;
    }

    #system03 ol li .subject {
        font-size: 1.75rem;
    }

    #system04 {
        height: auto;
        padding:130px 0;
    }

    #system04 ol li {
        width: 100%;
        padding:40px 20px;
    }

    #system04 ol li:not(:last-child){
        margin-bottom: 30px;
    }

    #system05 {
        height: auto;
        padding:130px 0;
    }

    #system05 ol li {
        flex-direction: column;
    }
}