@charset "utf-8";

.project_story .pc_only {
    display: block;
}

.project_story .sp_only {
    display: none;
}

.project_story .project_story_mv {
    width: 100%;
    /* max-height: 590px; */
    height: 30.7291vw;
    position: relative;
    overflow: hidden;
    display: flex;
}

.project_story .project_story_mv>div {
    width: 50%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.project_story .project_story_mv>div:first-child {
    background-image: url("../img/projectstory_mvleft.jpg");
}
.project_story .project_story_mv>div:last-child {
    background-image: url("../img/projectstory_mvright.jpg");
}

.project_story .project_story_mv .mv_inner {
    margin-top: 10.1%; /* 60px */
    /* margin-top: 3.12vw; */
    margin-right: 4.16vw;
    text-align: right;
}

.project_story .project_story_mv .par_page {
    margin-top: 14.4%;/* 85px 4.42vw;*/
    margin-right: 4.16vw;
    text-align: right;
}

.project_story .project_story_mv .par_page .par_page_ttl {
    /* font-size: 3.8rem; */
    font-size: 1.98vw;
    line-height: 1;
}

.project_story .project_story_mv .par_page .ttl_ruby {
    /* font-size: 2.3rem; */
    font-size: 1.19vw;
    color: #fff;
    font-weight: 500;
}

.project_story .project_story_mv .mv_inner .ttl_ruby {
    /* font-size: 4rem; */
    font-size: 2.08vw;
    color: #fff;
    font-weight: 500;
}


.project_story h1 {
    color: #fff;
    font-family: 'Neuzeit Grotesk';
    /* font-size: 8rem; */
    font-size: 4.16vw;
    font-weight: 800;
}

.project_story .par_page_ttl {
    color: #fff;
    font-family: 'Neuzeit Grotesk';
    /* font-size: 5rem; */
    font-size: 2.60vw;
    font-weight: 700;
}

.project_story .project_story_mv .project_story_inner h1 {
    margin-bottom: 4rem;
}

/* -----------------------------mvここまで-------------------------- */


.project_story .description {
    font-weight: 500;
    font-size: 2.4rem;
    text-align: center;
    line-height: 1.8;
    padding: 50px 40px;
    border-bottom: 1px solid #38393c;
}

.project_story .project_story_wrap {
    width: 100%;
    max-width: 1000px;
    height: auto;
    margin: 120px auto 50px;
}

.project_story .content_box img {
    width: 100%;
}

.project_story .project_story_wrap .inner_fb {
    display: flex;
    justify-content: space-around;
    position: absolute;
    bottom: 5%;
    width: 100%;
}

.project_story .project_story_wrap .dialog,
.project_story .project_story_wrap .dialog:first-child > div.pc_only {
    position: relative;
}
.project_story .project_story_wrap .dialog:nth-of-type(n+2) {
    margin-top: 50px;
}


.project_story .project_story_wrap .division_fb {
    display: flex;
    flex-direction: column;
    background-color: rgba(35, 102, 137, 0.6);
    color: #fff;
    /* font-size: 3.5rem; */
    font-size: 1.82vw;
    line-height: 1.8;
    letter-spacing: 0.2rem;
    margin: 0 30px;
    width: 100%;
}

.project_story .project_story_wrap .division_fb>div {
    padding: 10px 0 10px 32px;
    max-width: 440px;
}

.project_story .project_story_wrap .division {
    /* font-size: 2.4rem; */
    font-size: 1.25vw;
}

.project_story .project_story_wrap .d_person_ruby {
    font-family: 'Neuzeit Grotesk';
    /* font-size: 3rem; */
    font-size: 1.56vw;
    font-weight: 400;
    padding-left: 1rem;
    letter-spacing: 0.1rem;
}

.project_story .project_story_wrap .dialog_txt1,
.project_story .project_story_wrap .dialog_txt2,
.project_story .project_story_wrap .dialog_txt3 {
    padding: 70px 10px 50px;
}
@media screen and (min-width: 1921px){
    .project_story .project_story_wrap .division_fb {
        font-size: 3.5rem;
    }
    .project_story .project_story_wrap .division {
        font-size: 2.4rem;
    }
    .project_story .project_story_wrap .d_person_ruby {
        font-size: 3rem;
    }
}
@media screen and (max-width: 1080px){
    .project_story .project_story_wrap .dialog_txt1,
    .project_story .project_story_wrap .dialog_txt2,
    .project_story .project_story_wrap .dialog_txt3 {
        padding-left: 40px;
        padding-right: 40px;
    }
}
.project_story .project_story_wrap .division_txt_fb {
    display: flex;
    padding: 30px 0 0px;
    align-items: baseline;
}

.project_story .project_story_wrap .d_ttl {
    font-size: 2.4rem;
    font-weight: 500;
    padding-top: 20px;

}

.project_story .project_story_wrap .d_txt1 {
    width: 6em;
    font-weight: 500;
    white-space: nowrap;
}

.project_story .project_story_wrap .d_txt2 {
    width: 91%;
    text-align: left;
    font-size: 1.6rem;
    line-height: 2;
}

/* ----------------retina----------------------- */
@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 2dppx) {
    .project_story .project_story_mv>div:first-child {
        background-image: url("../img/projectstory_mvleft@2x.jpg");

    }

}

/* -----------------------SP------------------------------ */


@media screen and (max-width: 600px) {
    .project_story .pc_only {
        display: none;
    }

    .project_story .sp_only {
        display: block;
    }

    .project_story .description .content_inner {
        padding: 30px 6.25%;
        text-align: left;
        line-height: 2.2;
        font-size: 1.8rem;
    }


    .project_story .project_story_mv {
        height: 380px;
        flex-direction: column;
        border-top: 1px solid #38393c;
        border-bottom: 1px solid #38393c;
    }




    .project_story .project_story_mv>div {
        width: 50%;
    }

    .project_story .content_box .content_inner {
        display: block;
        margin: 0;

    }

    .project_story .project_story_mv>div {
        width: 100%;
        height: 190px;
        background-size: cover;
    }

    .project_story .project_story_mv>div img {
        object-fit: cover;
        width: 100%;
        height: 100%;
        border-top: 1px solid #38393c;
    }

    .project_story .project_story_mv .mv_inner {
        margin-top: 27px;
        margin-right: 20px;
    }

    .project_story .project_story_mv .par_page {
        margin-top: 33px;
        margin-right: 26px;
        line-height: 2.4;
    }

    .project_story .project_story_mv .par_page .par_page_ttl {
        font-size: 2rem;
        line-height: 1;
    }

    .project_story .project_story_mv .par_page .ttl_ruby {
        font-size: 1.4rem;
    }

    .project_story h1 {
        font-size: 3.5rem;
    }

    .project_story .par_page_ttl {
        font-size: 5rem;
        font-weight: 700;
    }

    .project_story .project_story_mv .mv_inner .ttl_ruby {
        font-size: 1.8rem;
        font-weight: 400;
    }

    .project_story .project_story_mv>div:first-child {
        background-image: url("../img/projecthistory_mvleft_sp.jpg");
        background-size: cover;
        background-repeat: no-repeat;

    }

    /* ---------------------------SPmvここまで------------------------------ */

    .project_story .description {
        font-size: 1.8rem;
        text-align: left;
        line-height: 2;
        padding: 0;
    }

    .project_story .project_story_wrap {
        max-width: 600px;
        margin: 50px auto 60px;
    }

    .project_story .project_story_wrap .inner_fb {
        width: 100%;
        top: initial;
        bottom: 0;
        flex-direction: column;
    }

    /* .project_story .project_story_wrap .inner_fb .division_fb:nth-of-type(2) {
        margin-top: 163px;
    } */

    .project_story .project_story_wrap .dialog {
        position: relative;
    }

    .project_story .project_story_wrap .dialog .sp_only {
        text-align: center;
    }

    .project_story .project_story_wrap .dialog .sp_only > div{
        position: relative;
    }

    .project_story .project_story_wrap .dialog .sp_only img {
        width: 100%;
        vertical-align: top;
    }

    /* .project_story .project_story_wrap .dialog .sp_only img:nth-child(2) {
        margin-top: -6px;
    } */


    .project_story .project_story_wrap .division_fb {
        font-size: 2.4rem;
        margin: 0;
    }

    .project_story .project_story_wrap .division_fb>div {
        padding: 10px 20px;
        width: 100%;
        max-width: 440px;
        text-align: left;
    }

    .project_story .project_story_wrap .division {
        font-size: 1.8rem;
    }

    .project_story .project_story_wrap .d_person_ruby {
        font-size: 2.4rem;
    }

    .project_story .project_story_wrap .dialog_txt1,
    .project_story .project_story_wrap .dialog_txt2,
    .project_story .project_story_wrap .dialog_txt3 {
        padding: 30px 6.25% 0;
    }


    .project_story .project_story_wrap .division_txt_fb {
        padding: 10px 0 20px 0;
    }

    .project_story .project_story_wrap .division_txt_fb:last-child {
        padding: 10px 0 0 0;
    }


    .project_story .project_story_wrap .d_ttl {
        font-size: 1.8rem;
        padding: 0;
    }

    .project_story .project_story_wrap .d_txt1 {
        width: 22%;
        font-weight: 500;
        font-size: 1.4rem;
    }

    .project_story .project_story_wrap .d_txt2 {
        width: 75%;
        font-size: 1.4rem;
    }


    .project_story .content_inner .dialog:nth-of-type(n+2) img {
        object-fit: cover;
        width: 100%;
    }

    @media (-webkit-min-device-pixel-ratio: 2),
    (min-resolution: 2dppx) {
        .project_story .project_story_mv>div:first-child {
            background-image: url("../img/projecthistory_mvleft_sp@2x.jpg");
        }
        .project_story .project_story_mv>div:last-child {
            background-image: url("../img/projecthistory_mvright_sp@2x.jpg");
        }
    }

}