@charset "UTF-8";

/*
ブレイクポイント
SP 〜519px
tab 520px ~ 959px (min-width:520px)
pc 960px~ (min-width:960px)
*/

/*======================
concept
======================*/
.concept {
    margin: var(--section-gutter) 0;
}

.concept_text {
    padding: 0 var(--contents-side-gutter);
    text-align: left;
    max-width: 550px;
}

.concept_img {
    position: relative;
    height: 120vh;
}

.concept_img .concept01 {
    width: 100%;
    max-width: 1200px;
    min-height: 300px;
    max-height: 500px;
    margin: 0 auto 0 0;
    padding-right: var(--contents-side-gutter);
}

.concept_img .concept01 img {
    min-height: 300px;
    max-height: 500px;
    object-fit: cover;
}

.concept_img .concept02 {
    position: absolute;
    width: 35%;
    max-width: 400px;
    right: 0;
    top: 100px;
}

.concept_img .concept03 {
    position: absolute;
    width: 35%;
    max-width: 400px;
    left: 20%;
    top: 400px;
}

.concept_text2 {
    padding: 0 var(--contents-side-gutter);
    text-align: left;
    max-width: 550px;
}


.concept_img2 {
    position: relative;
    height: 90vh;
}

.concept_img2 .concept04 {
    width: 100%;
    max-width: 1200px;
    min-height: 300px;
    margin: 0 0 0 auto;
    padding-left: var(--contents-side-gutter);
}

.concept_img2 .concept04 img {
    min-height: 300px;
    object-fit: cover;
}

.concept_img2 .concept05 {
    position: absolute;
    width: 35%;
    max-width: 400px;
    left: 0;
    top: 300px;
}

.concept_img2 .concept06 {
    position: absolute;
    width: 35%;
    max-width: 300px;
    right: 10%;
    top: 450px;
}

/* ===============ここからmin-width:520px=============== */
@media screen and (min-width:520px) {

    .concept_img {
        height: 130vh;
    }

    .concept_text2 {
        margin: 0 0 0 auto;
    }

}

/* ===============ここまでmin-width:520px=============== */

/* ===============ここからmin-width:960px=============== */
@media screen and (min-width:960px) {

    /*======================
    concept
    ======================*/
    .concept_box {
        margin-bottom: var(--section-gutter-pc);
        width: 80%;
        margin: 0 0 0 auto;
    }

    .concept_text {
        padding: 0;
    }

    .concept_img {
        height: 140vh;
    }

    .concept_box2 {
        margin-bottom: var(--section-gutter-pc);
        padding: 0 10% 0 0;
        width: 50%;
        margin: 0 0 0 auto;
    }

    .concept_text2 {
        padding: 0;
    }

    .concept_img2 {
        height: 130vh;
    }

    .concept_img2 .concept05 {
        top: 400px;
    }

    .concept_img2 .concept06 {
        top: 550px;
    }
}

/* ===============ここまでmin-width:960px=============== */