@charset "utf-8";
#preloadedImages {
    width: 0;
    height: 0;
    display: inline;
    background-image: url("../img/03_hover.jpg"),url("../img/01_hover.jpg"),url("../img/02_hover.jpg"),url("../img/03_hover@2x.jpg"),url("../img/02_hover@2x.jpg"),url("../img/01_hover@2x.jpg")
    ;
}




.works .pc_only{
    display: block;
}

.works .sp_only{
    display: none;
}


.works .breadcrumb {
    color: #38393c;
    background-color: #fff;
}


.works .breadcrumb .content_inner {
    margin: 0 auto;
}


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

.works .works_mv>div {
    width: 50%;
}

.works .works_mv>div {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}
.works .works_mv>div:first-child {
    background-image: url("../img/works_mvleft.jpg");
}
.works .works_mv>div:last-child {
    background-image: url("../img/works_mvright.jpg");
}

.works .works_mv .mv_inner {
    /* margin-top: 60px; */
    /* margin-right: 80px; */
    margin-top: 10.1%;
    margin-right: 4.16vw;
    text-align: right;
}

.works .works_mv .par_page {
    /* margin-top: 85px; */
    /* margin-right: 80px; */
    margin-top: 14.4%;
    margin-right: 4.16vw;
    text-align: right;
}

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

.works .works_mv .par_page .ttl_ruby {
    /* font-size: 2.3rem; */
    font-size: 1.19vw;
}

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

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

.works .works_mv .works_inner h1 {
    margin-bottom: 4rem;
}

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

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

.works .grid_box {
    width: 100%;
    max-width: 1000px;
    height: auto;
    /* border-top: 1px solid #535353; */
    display: grid;
    grid-template-rows: auto auto 1fr auto;
    /* border: 1px solid #000; */
}


.works .content_box .content_inner {
    /* margin: 20px auto; */
    margin: 125px auto 95px;

}

.works .grid_ttl {
    color: #fff;
    font-family: 'Neuzeit Grotesk';
    font-size: 10rem;
    font-weight: 800;
}

.works .grid_ttl_ruby,
.works .ttl_ruby {
    color: #fff;
    font-size: 2.08vw;
    font-weight: 500;
}

.works .g_box1 .grid_txt2 .grid_ttl1,
.works .g_box2 .grid_txt2 .grid_ttl1,
.works .g_box3 .grid_txt2 .grid_ttl1,
.works .g_box4 .grid_txt2 .grid_ttl1 {
    /* font-family: 'Neuzeit Grotesk'; */
    font-size: 3rem;
    font-weight: 800;
    color: #236689;
    margin-bottom: 20px;
}

.works .g_box1 .grid_txt2 .grid_ttl2,
.works .g_box2 .grid_txt2 .grid_ttl2,
.works .g_box3 .grid_txt2 .grid_ttl2,
.works .g_box4 .grid_txt2 .grid_ttl2 {
    font-family: 'Neuzeit Grotesk';
    font-size: 4rem;
    font-weight: 800;
    line-height: 1;
    color: #236689;
}

.works .g_box1 .grid_txt2 .grid_ttl,
.works .g_box2 .grid_txt2 .grid_ttl,
.works .g_box3 .grid_txt2 .grid_ttl,
.works .g_box4 .grid_txt2 .grid_ttl {
    /* font-family: 'Neuzeit Grotesk'; */
    font-size: 2.4rem;
    font-weight: 500;
    color: #236689;
    line-height: 1.5;
}



.works .g_box1 .grid_txt2 .grid_ttl_ruby,
.works .g_box2 .grid_txt2 .grid_ttl_ruby,
.works .g_box3 .grid_txt2 .grid_ttl_ruby {
    font-size: 2.4rem;
    font-weight: 500;
    color: #236689;
    line-height: 2;
}

.works .content_box .content_inner {
    width: 100%;
    max-width: 1000px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 100px 40px;
    grid-auto-rows: auto;
}

.works .grid_box.g_box1 .grid_inner:first-child,
.works .grid_box.g_box2 .grid_inner:first-child,
.works .grid_box.g_box3 .grid_inner:first-child,
.works .grid_box.g_box4 .grid_inner:first-child {
    padding-bottom: calc(100%*300/480);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% auto;
    position: relative;
    /* border-bottom: 1px solid #535353;
    border-left: 1px solid #535353;
    border-right: 1px solid #535353; */
}

.works .grid_box.g_box1 .grid_inner:first-child {
    /* grid-row-start: 1; */
    background-image: url("../img/01.jpg");
}

.works .grid_box.g_box2 .grid_inner:first-child {
    /* grid-row-start: 2; */
    background-image: url("../img/02.jpg");
}

.works .grid_box.g_box3 .grid_inner:first-child {
    /* grid-row-start: 3; */
    background-image: url("../img/03.jpg");
}

.works .grid_box.g_box4 .grid_inner:first-child {
    /* grid-row-start: 4; */
    background-image: url("../img/04.jpg");
}



.works .grid_box.g_box1 .grid_txt1,
.works .grid_box.g_box2 .grid_txt1,
.works .grid_box.g_box3 .grid_txt1,
.works .grid_box.g_box4 .grid_txt1 {
    position: absolute;
    bottom: -30px;
    right: 22px;
}

.works .grid_box:nth-child(2) .grid_ttl1 {
    font-size: 3rem;
}

.works .g_box1 .grid_inner:nth-child(4),
.works .g_box2 .grid_inner:nth-child(4),
.works .g_box3 .grid_inner:nth-child(4),
.works .g_box4 .grid_inner:nth-child(4),
.works .g_box1 .grid_inner:nth-child(4):hover,
.works .g_box4 .grid_inner:nth-child(4):hover,
.works .g_box2 .grid_inner:nth-child(4):hover,
.works .g_box3 .grid_inner:nth-child(4):hover {
 
    background-size: 100% auto;
    border-top: none;
    background-repeat: no-repeat;
    background-size: cover;
}
.works .g_box1 .grid_inner:nth-child(4):hover,
.works .g_box4 .grid_inner:nth-child(4):hover,
.works .g_box2 .grid_inner:nth-child(4):hover,
.works .g_box3 .grid_inner:nth-child(4):hover {
    transition: .3s;
    -webkit-transition: .3s;
    -moz-transition: .3s;
    -ms-transition: .3s;
    -o-transition: .3s;
}

.works .g_box1 .grid_inner:nth-child(4) {
    background-image: url("../img/works_man.jpg");
}

.works .g_box4 .grid_inner:nth-child(4) {
    background-image: url("../img/works_man02.jpg");
}

.works .g_box2 .grid_inner:nth-child(4),
.works .g_box3 .grid_inner:nth-child(4) {
    background-image: url("../img/works_woman.jpg");
}

.works .g_box1 .grid_inner:nth-child(4):hover {
    background-image: url("../img/03_hover.jpg");
}

.works .g_box4 .grid_inner:nth-child(4):hover {
    background-image: url("../img/01_hover.jpg");
}

.works .g_box2 .grid_inner:nth-child(4):hover,
.works .g_box3 .grid_inner:nth-child(4):hover {
    background-image: url("../img/02_hover.jpg");
}


.works .grid_txt4 {
    line-height: 1.8;
    font-size: 2.4rem;
    font-weight: 600;
}

.works .grid_txt4 a{
    color: #236689;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    height: 100%;
    width: 100%;
    padding: 30px 40px;
    font-weight: 500;
    line-height: 1.7;}

.works .grid_txt4:hover a{
    color: #fff;
}


.works .grid_txt4>div {
    margin-left: auto;
    margin-right: 40px;
    width: fit-content;
    font-weight: 500;
    line-height: 1.7;
}

.works .g_box1 .grid_txt2,
.works .g_box2 .grid_txt2,
.works .g_box3 .grid_txt2,
.works .g_box4 .grid_txt2 {
    padding: 30px 45px;
}

.works .g_box1 .grid_txt3,
.works .g_box2 .grid_txt3,
.works .g_box3 .grid_txt3,
.works .g_box4 .grid_txt3 {
    padding: 45px 45px 70px 45px;
    line-height: 2;
}
@media screen and (min-width: 601px) {
    .works .content_box .grid_box .grid_inner:nth-child(2),
    .works .content_box .grid_box .grid_inner:nth-child(3),
    .works .content_box .grid_box .grid_inner:nth-child(4) {
        border-left: #38393c 1px solid;
        border-right: #38393c 1px solid;
    }
    .works .content_box .grid_box .grid_inner:nth-child(3),
    .works .content_box .grid_box .grid_inner:nth-child(4) {
        border-top: #38393c 1px solid;
    }
    .works .content_box .grid_box .grid_inner:nth-child(4) {
        border-bottom: #38393c 1px solid;
    }
}
@media screen and (min-width: 601px) and (max-width: 950px) {
    .works .grid_txt4 {
        font-size: 2vw;
    }
}

/* ----------------retina----------------------- */
@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 2dppx) {

    .works .works_mv>div:first-child {
        background-image: url("../img/works_mvleft@2x.jpg");
    }
    .works .works_mv>div:last-child {
        background-image: url("../img/works_mvright@2x.jpg");
    }

    .works .grid_box.g_box1 .grid_inner:first-child {
        background-image: url("../img/01@2x.jpg");
    }

    .works .grid_box.g_box2 .grid_inner:first-child {
        background-image: url("../img/02@2x.jpg");
    }

    .works .grid_box.g_box3 .grid_inner:first-child {
        background-image: url("../img/03@2x.jpg");
    }

    .works .grid_box.g_box4 .grid_inner:first-child {
        background-image: url("../img/04@2x.jpg");
    }


    .works .g_box2 .grid_inner:nth-child(4),
    .works .g_box3 .grid_inner:nth-child(4) {
        background-image: url("../img/works_woman@2x.jpg");
    }

    .works .g_box1 .grid_inner:nth-child(4) {
        background-image: url("../img/works_man@2x.jpg");
    }

    .works .g_box4 .grid_inner:nth-child(4) {
        background-image: url("../img/works_man02@2x.jpg");

    }
    .works .g_box1 .grid_inner:nth-child(4):hover {
        background-image: url("../img/03_hover@2x.jpg");
    }
    
    .works .g_box4 .grid_inner:nth-child(4):hover {
        background-image: url("../img/01_hover@2x.jpg");
    }
    
    .works .g_box2 .grid_inner:nth-child(4):hover,
    .works .g_box3 .grid_inner:nth-child(4):hover {
        background-image: url("../img/02_hover@2x.jpg");
    }
}


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

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

    .works .sp_only {
        display: block;
    }

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

    .works .description .content_inner {
        padding: 30px 6.25%;
        text-align: left;
        line-height: 2.2;
        font-size: 1.8rem;
    }
    /* .works .description .content_inner {
        padding: 30px 6.25% 30px 6.25%;
        text-align: left;
        line-height: 2.4;
        font-size: 1.8rem;
        font-weight: 500;
    } */


    .works .works_mv {
        height: 380px;
        flex-direction: column;

    }

    .works .works_mv>div {
        width: 50%;
    }

    .works .works_mv>div:last-child {
        background-position: bottom;
    }

    .works .content_box .content_inner {
        display: block;
        margin: 75px auto 100px;

    }

    .works .content_box .content_inner .grid_box {
        max-width: 600px;
        grid-template-columns: 1fr;
        gap: 0 0;
        grid-auto-rows: 240px auto;
    }

    .works .content_box .content_inner .grid_box:nth-of-type(n+2) {
        margin-top: 80px;
    }

    .works .grid_ttl {
        font-size: 8rem;
    }

    .works .grid_ttl_ruby,
    .works .ttl_ruby {
        font-size: 1.8rem;
    }

    .works .g_box1 .grid_txt2 .grid_ttl1,
    .works .g_box2 .grid_txt2 .grid_ttl1,
    .works .g_box3 .grid_txt2 .grid_ttl1,
    .works .g_box4 .grid_txt2 .grid_ttl1 {
        font-size: 2.5rem;
    }

    .works .g_box1 .grid_txt2 .grid_ttl2,
    .works .g_box2 .grid_txt2 .grid_ttl2,
    .works .g_box3 .grid_txt2 .grid_ttl2,
    .works .g_box4 .grid_txt2 .grid_ttl2 {
        font-size: 3.5rem;
    }

    .works .g_box1 .grid_txt2 .grid_ttl_ruby,
    .works .g_box2 .grid_txt2 .grid_ttl_ruby,
    .works .g_box3 .grid_txt2 .grid_ttl_ruby {
        font-size: 2.4rem;
        font-weight: 500;
        color: #236689;
        line-height: 2;
    }

    .works .grid_box.g_box1 .grid_inner:first-child,
    .works .grid_box.g_box2 .grid_inner:first-child,
    .works .grid_box.g_box3 .grid_inner:first-child,
    .works .grid_box.g_box4 .grid_inner:first-child {
        padding-bottom: calc(100%*300/480);
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% auto;
        position: relative;
        /* border-bottom: 1px solid #535353;
        border-left: 1px solid #535353;
        border-right: 1px solid #535353; */
    }

    .works .grid_box.g_box1 .grid_inner:first-child {
        grid-row-start: 1;
        background-image: url("../img/01.jpg");
    }

    .works .grid_box.g_box2 .grid_inner:first-child {
        grid-row-start: 1;
        background-image: url("../img/02.jpg");
    }

    .works .grid_box.g_box3 .grid_inner:first-child {
        grid-row-start: 1;
        background-image: url("../img/03.jpg");
    }

    .works .grid_box.g_box4 .grid_inner:first-child {
        grid-row-start: 1;
        background-image: url("../img/04.jpg");
    }


    .works .grid_box.g_box1 .grid_txt1,
    .works .grid_box.g_box2 .grid_txt1,
    .works .grid_box.g_box3 .grid_txt1,
    .works .grid_box.g_box4 .grid_txt1 {
        bottom: -25px;
    }

    .works .grid_box:nth-child(2) .grid_ttl1 {
        font-size: 3rem;
    }

    .works .g_box1 .grid_inner:nth-child(4),
    .works .g_box2 .grid_inner:nth-child(4),
    .works .g_box3 .grid_inner:nth-child(4),
    .works .g_box4 .grid_inner:nth-child(4) {
        background-position: left center;
        background-size: cover;
        background-repeat: no-repeat;
        height: 110px;
        border-top: 1px solid #535353;
        border-bottom: 1px solid #535353;
        border-right: 0;
        border-left: 0;
    }


    /* .works .g_box1 .grid_inner:nth-child(4) {
        background-image: url("../img/works_man.jpg");
    }

    .works .g_box4 .grid_inner:nth-child(4) {
        background-image: url("../img/works_man02.jpg");
    }

    .works .g_box2 .grid_inner:nth-child(4),
    .works .g_box3 .grid_inner:nth-child(4) {
        background-image: url("../img/works_woman.jpg");
    } */


    .works .grid_txt4 {
        /* padding: 30px 0 5px 231px; */
        font-size: 1.8rem;
    }

    .works .g_box1 .grid_txt2,
    .works .g_box2 .grid_txt2,
    .works .g_box3 .grid_txt2,
    .works .g_box4 .grid_txt2 {
        padding: 15px 10.4166%;
        border-left: 0;
        border-right: 0;
    }

    .works .g_box1 .grid_txt3,
    .works .g_box2 .grid_txt3,
    .works .g_box3 .grid_txt3,
    .works .g_box4 .grid_txt3 {
        padding: 40px;
        line-height: 2;
        border-left: 0;
        border-right: 0;
        font-size: 1.4rem;
    }

    .works .g_box1 .grid_txt2 .grid_ttl,
    .works .g_box2 .grid_txt2 .grid_ttl,
    .works .g_box3 .grid_txt2 .grid_ttl,
    .works .g_box4 .grid_txt2 .grid_ttl {
        font-size: 2.3rem;
        line-height: 1.7;
    }


    /* --------------------sp_mv-------------------------- */
    .works .works_mv>div {
        width: 100%;
        height: 190px;
        background-size: cover;
    }

    .works .works_mv>div img {
        object-fit: cover;
        width: 100%;
        height: 100%;
    }

    .works .works_mv .mv_inner {
        margin-top: 27px;
        margin-right: 20px;
    }

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

    .works .works_mv .par_page .par_page_ttl {
        font-size: 2rem;
        line-height: 1;
    }

    .works .works_mv .par_page .ttl_ruby {
        font-size: 1.4rem;
    }

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

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


}