@charset "utf-8";
#preloadedImages {
    width: 0;
    height: 0;
    display: inline;
    background-image: url('../img/company01_hover_color.jpg'),url("../img/company02_hover_color.jpg"),url("../img/company03_hover_color.jpg"),url('../img/company_hover_color01_sp.jpg'),url('../img/company_hover_color01_sp@2x.jpg');
}

.company .pc_only {
    display: block;
}

.company .sp_only {
    display: none;
}


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


.company .breadcrumb .content_inner {
    /* max-width: 1920px; */
    margin: 0 auto;
}


.company .company_mv {
    width: 100%;
    /* max-height: 390px; */
    height: 20.3125vw;
    position: relative;
    overflow: hidden;
    display: flex;
    background-image: url("../img/company_mv.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    border-top: 1px solid #38393c;
    border-bottom: 1px solid #38393c;
    background-size: cover;
}

.company .company_mv>div {
    display: flex;
    align-items: center;
    margin: 0 auto;
    height: auto;

}

.company .company_mv .mv_inner {
    display: flex;
    flex-direction: column;
    align-items: center;
}

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

.company .grid_ttl {
    font-family: 'Neuzeit Grotesk';
    /* font-size: 5rem; */
    font-size: 2.60vw;
    font-weight: 800;
}

.company .grid_txt2 .grid_ttl,
.company .grid_txt2 .grid_ttl_ruby {
    color: #e15252;
}

.company .grid_txt1 .grid_ttl,
.company .grid_txt3 .grid_ttl,
.company .grid_txt1 .grid_ttl_ruby,
.company .grid_txt3 .grid_ttl_ruby {
    color: #fff;
}


.company .grid_ttl_ruby{
    /* font-size: 2.2em; */
    font-size: 1.82vw;
    font-weight: 400;
}

.company .mv_inner .ttl_ruby {
    color: #fff;
    font-size: 2.1vw;
    font-weight: 500;
}

.company .company_mv .company_inner h1 {
    margin-bottom: 4rem;
}

.company .description .content_inner {
    width: 100%;
    /* max-width: 1920px; */
    margin: 40px auto 50px;
    text-align: center;
    font-size: 1.5em;
    padding: 0 6.25%;
}
.company .content_box {
    max-height: 780px;
    height: 40.624vw;
}
.company .content_box .content_inner,
.company .content_box .content_inner .grid_box {
    height: 100%;
}
.company .grid_box {
    display: grid;
    /* max-width: 1920px; */
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 1fr 1fr;
    border-top: 1px solid #38393c;
    border-right: 1px solid #38393c;
    border-left: 1px solid #38393c;
    margin: 0 auto;
}

.company .content_inner .grid_inner {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;

}




.company .grid_box .grid_inner:first-child {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 1;
    grid-row-end: 3;
    background-image: url("../img/company01.jpg");
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    border-bottom: 1px solid #38393c;
    border-right: 1px solid #38393c;
}

.company .grid_box .grid_inner:first-child a,
.company .grid_box .grid_inner:nth-child(2) a
 {
    display: flex;
    align-items: flex-end;
    height: 100%;
}

/* .company .grid_box .grid_inner:nth-child(2),
.company .grid_box .grid_inner:nth-child(3),
.company .grid_box .grid_inner:nth-child(4) {
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    justify-content: center;
} */

.company .grid_box .grid_inner:nth-child(2) {
    background-image: url("../img/company02.jpg");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 2;
    border-bottom: 1px solid #38393c;

}


.company .grid_box .grid_inner:nth-child(3) {
    background-image: url("../img/company03.jpg");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 2;
    grid-row-end: 3;
    border-bottom: 1px solid #38393c;
    justify-content: center;

}

.company .grid_box .grid_inner:nth-child(3) a{
    display: flex;
    align-items: center;
    height: 100%;

}

.company .grid_box .grid_inner:first-child:hover {
    background-image: url('../img/company01_hover_color.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: 0.3s;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -ms-transition: 0.3s;
    -o-transition: 0.3s;
}


.company .grid_box .grid_inner:nth-child(2):hover {
    background-image: url("../img/company02_hover_color.jpg");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    transition: 0.3s;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -ms-transition: 0.3s;
    -o-transition: 0.3s;

}

.company .grid_box .grid_inner:nth-child(3):hover {
    background-image: url("../img/company03_hover_color.jpg");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    transition: 0.3s;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -ms-transition: 0.3s;
    -o-transition: 0.3s;

}

.company .grid_inner:hover .grid_txt2 {
    background: #e15252;
}

.company .grid_inner:hover .grid_ttl,
.company .grid_inner:hover .grid_ttl_ruby {
    color: #fff;
    transition: 0.3s;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -ms-transition: 0.3s;
    -o-transition: 0.3s;

}


.company .grid_txt1 {
    padding: 2.5em 80px;
}

.company .grid_txt2 {
    color: #e15252;
    background: #fff;
    /* padding: 6%; */
    padding: 3.2% 8%;
    width: 68%;
    border-top: 1px solid #38393c;
    border-right: 1px solid #38393c;
}

.company .grid_txt3 {
    padding: 2em 0 2em 80px;
}


/* ------------------------retina---------------------------- */

@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 2dppx) {
    .company .company_mv {
        background-image: url("../img/company_mv@2x.jpg");
    }

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

    .company .grid_box .grid_inner:nth-child(2) {
        background-image: url("../img/company02@2x.jpg");

    }

    .company .grid_box .grid_inner:nth-child(3) {
        background-image: url("../img/company03@2x.jpg");
    }

}


/* ------------------------------------------------------------------ */

@media screen and (max-width: 600px) {
    .company .grid_box .grid_inner:first-child a {
        align-items: center;
    }
/* } */

/* @media screen and (max-width: 800px) { */
    .company .company_mv {
        background-image: url("../img/company_mv_sp.jpg");
        background-size: cover;
        background-position: center;
    }


    .company .description .content_inner {
        padding: 35px 06.25%;
        font-size: 1.8rem;
    }

    .company .description .content_inner {
        margin: 0 auto;
        text-align: left;
    }

    .company .content_box {
        height: auto;
    }

    .company .content_box .content_inner {
        margin: 0 auto;
    }


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

    .company .company_mv {
        height: auto;
    }

    .company .company_mv .mv_inner {
        align-items: flex-end;
        width: 100%;
        height: 100%;
        justify-content: flex-end;
        padding-right: 20px;
        line-height: 1;
        padding-bottom: 10px;
    }

    .company .grid_ttl_ruby,
    .company .ttl_ruby {
        font-size: 1.6rem;
    }

    .company .mv_inner .ttl_ruby {
        font-size: 1.8rem;
    }

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

    .company .grid_box {
        display: flex;
        flex-direction: column;
    }

    .company .grid_box .grid_inner {
        width: 100%;
        height: 190px;
        background-size: cover;

    }


    .company .grid_ttl {
        font-size: 2rem;
        line-height: 2;
    }

    .company .grid_txt1,
    .company .grid_txt2,
    .company .grid_txt3 {
        padding: 5px 0 5px 6.25%;
        width: 69%;

    }

    /* .company .grid_txt1 {
        padding: 15px 80px;
        width: 69%;

    }

    .company .grid_txt2,
    .company .grid_txt3 {
        padding: 15px 80px;
        width: 69%;
    } */


    .company .grid_box .grid_inner:nth-child(3) {
        border-right: none;
        border-bottom: none;
    }



    .company .grid_box .grid_inner:first-child:hover {
        background-image: url('../img/company_hover_color01_sp.jpg');
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
    }

    /* .company .grid_box .grid_inner:nth-child(2):hover {
        background-image: url('../img/hover_color02_sp.jpg');
    }
    .company .grid_box .grid_inner:nth-child(3):hover {
        background-image: url('../img/hover_color03_sp.jpg');
    } */


    .company .grid_box .grid_inner:first-child {
        background-image: url("../img/company01_sp.jpg");
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        border-right: none;
    }

    /* .company .grid_box .grid_inner:nth-child(2) {
    background-image: url("../img/companysales_mvright.jpg");

  }

  .company .grid_box .grid_inner:nth-child(3) {
    background-image: url("../img/company02_mvright.jpg");
} */


    @media (-webkit-min-device-pixel-ratio: 2),
    (min-resolution: 2dppx) {
        .company .company_mv {
            background-image: url("../img/company_mv_sp@2x.jpg");
            background-size: cover;
        }

        .company .grid_box .grid_inner:first-child:hover {
            background-image: url('../img/company_hover_color01_sp@2x.jpg');
        }

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



        /* .company .grid_box .grid_inner:first-child {
    background-image: url("../img/companynewgradustes_mvright.jpg");
}

  .company .grid_box .grid_inner:nth-child(2) {
    background-image: url("../img/companysales_mvright.jpg");

  }

  .company .grid_box .grid_inner:nth-child(3) {
    background-image: url("../img/company02_mvright.jpg");
}
  .company .grid_box .grid_inner:nth-child(4) {
    background-image: url("../img/companymarketing_mvright.jpg");
  } */

    }


}