@charset "UTF-8";

.concept{
    margin-bottom: 80px;
    overflow-x: hidden;/*中央画像をあえて切っているため、スクロールできないよう見切れた部分は隠す*/
}

.concept img{
    border-radius: 30px;
}

.concept p{
    line-height: 2;
    margin-bottom: 40px;
    text-align: justify;/*両端揃え*/
}

.concept-top{
    display: flex;
    justify-content: space-between;
}

.concept-top .img-left{
    max-width: 380px;
    margin-top: 180px;
}

.concept-top .text{
    max-width: 300px;
    margin: 90px 20px 0;
}

.concept-top .img-right{
    max-width: 470px;
}

.concept-middle {
    max-width: 830px;
    width: 70vw;/*横幅は画面幅の0.7*/
    margin: -40px -80px 0 auto;
}

.concept-bottom{
    display: flex;
    margin-top: -40px;/*中央ページと被せるため*/
}

.concept-bottom .img-left{
    max-width: 220px;
}

.concept-bottom .img-right{
    max-width: 280px;
    margin: 250px 80px 0;
}

.concept-bottom .text{
    max-width: 280px;
    margin-top: 380px;
}

@media screen and (max-width: 767px) {
    .concept{
        margin-bottom: 60px;
    }

    .concept-top{
        flex-direction: column;
        margin-bottom: 40px;
    }

    .concept-top .text{
        max-width: 100%;
        margin: 20px auto 0;
    }

    .concept-middle{
        width: 100%;
        margin: 0 0 40px;/*当初のmargin消す*/
        padding: 0 20px;
    }

    .concept-bottom{
        flex-direction: column;
        margin-top: 0;
    }

    .concept-bottom .img-left{
        max-width: 100%;
        margin: 0 auto;
    }

    .concept-bottom .img-right{
        max-width: 100%;
        margin: 40px auto 40px;
    }

    .concept .text{
    max-width: 100%;
    margin-top: 0;
    }
}