@charset "utf-8";

#preloadedImages {
    width: 0;
    height: 0;
    display: inline;
    background-image: url("../img/top_pickup_hover.jpg"),url("../img/top_pickup_hover@2x.jpg"),url("../img/top_pickup_hover_sp.jpg"),url("../img/top_pickup_hover_sp@2x.jpg"),url("../img/top_people_hover.jpg"),url("../img/top_people01_hover.jpg"),url("../img/top_people02_hover.jpg"),url("../img/top_people03_hover.jpg"),url("../img/top_people_hover@2x.jpg"),url("../img/top_people01_hover@2x.jpg"),url("../img/top_people02_hover@2x.jpg"),url("../img/top_people03_hover@2x.jpg"),url("../img/top_people_hover_sp.jpg"),url("../img/top_people01_hover_sp.jpg"),url("../img/top_people02_hover_sp.jpg"),url("../img/top_people03_hover_sp.jpg"),url("../img/top_people_hover_sp@2x.jpg"),url("../img/top_people01_hover_sp@2x.jpg"),url("../img/top_people02_hover_sp@2x.jpg"),url("../img/top_people03_hover_sp@2x.jpg"),url("../img/top_ourwork_hover.jpg"),url("../img/top_ourwork_hover@2x.jpg"),url("../img/top_ourwork_hover_sp.jpg"),url("../img/top_ourwork_hover_sp@2x.jpg"),url("../img/top_company_hover.jpg"),url("../img/top_company_hover@2x.jpg"),url("../img/top_company_hover_sp@2x.jpg"),url("../img/top_company_hover_sp@2x.jpg"),url("../img/top_recruitinfo_hover.jpg"),url("../img/top_recruitinfo_hover@2x.jpg"),url("../img/top_recruitinfo_hover_sp@2x.jpg"),url("../img/top_recruitinfo_hover_sp@2x.jpg");
}



.pc_only {
    display: block;
}

.sp_only {
    display: none;
}

.top_page .grid_box {
    display: grid;
}

.top_page .grid_inner {
    width: 100%;
    background-size: cover;
    /* padding: 0 2.0833%; */
    transition: all .3s;
}

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

.top_page .grid_box .grid_ttl_ruby,
.top_page .grid_box .grid_ttl_ruby {
    /* font-size: 3.6rem; */
    font-size: 1.87vw;
    font-weight: 500;
}

.top_page .contents-inner {
    margin: 0 auto;
    width: 100%;
    /* max-width: 1920px; */
}

/* .top_page .top_mv .slide ul {
    position: relative;
}

.top_page .top_mv .slide li {
    position: absolute;
    width: 100%;
} */

.top_page .top_mv .slide_area {
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
    height: 100%;

}

/* .top_paga .top_mv .slide_area.pc_only {
}
 */

.slick-slide {
    margin: 0;
}

.slick-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.slick-prev,
.slick-next {
    z-index: 1;
}

.slick-prev:before,
.slick-next:before {
    color: #000;
}

.slick-slide {
    transition: all ease-in-out .5s;
    opacity: .2;
    -webkit-transition: all ease-in-out .5s;
    -moz-transition: all ease-in-out .5s;
    -ms-transition: all ease-in-out .5s;
    -o-transition: all ease-in-out .5s;
}

.slick-active {
    opacity: 1;
}

.slick-current {
    opacity: 1;
}

.thumb {
    margin: 20px 0 0;
}

.thumb .slick-slide {
    cursor: pointer;
}

.thumb .slick-slide:hover {
    opacity: .7;
}

.slider .slick-list {
    height: 100%;
}

.slider {
    /* max-width: 1920px; */
    margin: 0 auto;
    height: 100%;
}

.slider .slick-dots {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    position: absolute;
    bottom: 40px;
    width: 100%;
}

.top_page .slick-track {
    height: 100%;
}

.slider .slick-dots li {
    position: relative;
    display: inline-block;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    cursor: pointer;
}

.slider .slick-dots li button {
    font-size: 0;
    line-height: 0;
    padding: 0;
    cursor: pointer;
    color: transparent;
    border: 0;
    text-indent: -9999px;
    display: block;
    width: 20px;
    height: 20px;
    width: 1.04vw;
    height: 1.04vw;
    margin-right: 8px;
    outline: 0;
    /* border-radius: 5px; */
    transition-duration: 0.3s;
}

.slider .slick-dots li:last-child button {
    margin-right: 0px;
}

.slider .slick-dots li button:before {
    content: none;
}

.slider .slick-dots li button {
    background: #3d4045;
}

/* .slider .slick-dots li:nth-child(1) button {
    background: #a9b7ba;
}

.slider .slick-dots li:nth-child(2) button {
    background: #a9b7ba;
}

.slider .slick-dots li:nth-child(3) button {
    background: #a9b7ba;
} */

.top_page .mv_ttl.mv_ttl_01 {
    background-color: rgba(225, 82, 81, 0.7);
}

.top_page .mv_ttl.mv_ttl_02 {
    background-color: rgba(35, 102, 137, 0.7);
}

.top_page .mv_ttl.mv_ttl_03 {
    background-color: rgba(37, 138, 84, 0.7);
}

.slick-initialized .slick-slide {
    position: relative;

}

/* .slider .slick-dots li:nth-child(4) button {
    background: #b4b1a0;
}

.slider .slick-dots li:nth-child(5) button {
    background: #e5dfd3;
} */

.slider .slick-dots li button:hover,
.slider .slick-dots li.slick-active button {
    /* border-radius: 0px; */
    /* height: 40px; */
    height: 2.08vw;
}

.top_page .top_mv ul li a {
    text-indent: -9999px;
    text-decoration: none;
    display: block;
    width: 14px;
    height: 14px;
}




@media screen and (max-width: 600px) {

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

    .pc_only {
        display: none;
    }

    .sp_only {
        display: block;
    }

    .top_page .grid_inner {
        height: 190px;
        border-bottom: 1px solid #a3a3a3;
    }

    .top_page .grid_box .grid_ttl {
        font-size: 1.8rem;
    }

    .top_page .grid_box .grid_ttl_ruby {
        font-size: 1.8rem;
        font-weight: 500;

    }


}


.top_page .top_mv {
    display: block;
    width: 100%;
    /* max-height: 980px; */
    position: relative;
}

.top_page .top_mv>div:first-child {
    /* background-image: url("../img/top_mv01.jpg"); */
    width: 100%;
    /* max-height: 980px; */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
}

.top_page .top_mv .mv_ttl {
    padding: 20px 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #fff;
    position: absolute;
    /* top: 23%; */
    /* left: 25%; */
    top: 28%;
    bottom: 31%;
    left: 20%;
    right: 20%;
    min-height: -moz-fit-content;
    min-height: fit-content;
}

.top_page .top_mv .mv_ttl h1 {
    font-family: 'Neuzeit Grotesk';
    /* font-size: 10.5rem; */
    font-size: 5.4vw;
    font-weight: 800;
    text-align: center;
    letter-spacing: 0.3rem;
}

.top_page .top_mv h2 {
    font-family: 'Neuzeit Grotesk';

}

.top_page .mv_subttl {
    color: #fff;
    /* font-size: 2.2em; */
    font-size: 1.82vw;
    font-weight: 500;
    line-height: 2;
    margin-top: 0.5em;
}

@media screen and (max-width: 600px) {

    .top_page .top_mv,
    .top_page .top_mv>div:first-child {
        /* max-height: 460px; */
    }

    .top_page .top_mv .mv_ttl {
        padding: 1em 20px;
        left: 0;
        top: 41.3%;
        width: 100%;
    }

    .top_page .top_mv .mv_ttl h1 {
        font-size: 4.5rem;
        letter-spacing: 0;
    }

    .top_page .mv_subttl {
        margin-top: 0;
        font-size: 1.8rem;
        font-weight: normal;
    }

    .slider .slick-dots {
        bottom: 20px;
    }

    .slider .slick-dots li button {
        margin-right: 5px;
        width: 12px;
        height: 12px;
    }

    .slider .slick-dots li button:hover,
    .slider .slick-dots li.slick-active button {
        height: 24px;
    }
}

/* @media screen and (min-width: 400px) and (max-width: 600px){

    .top_page .top_mv .mv_ttl {
        top: 31.3%
    }
    .slider .slick-dots {
        bottom: 265px;
    }
} */


@media screen and (min-width: 1921px) {
    .top_page .top_mv .mv_ttl {
        /* width: 50%; */
    }
}

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

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


/* ---------------------------sp--------------------------------------- */


/* @media screen and (max-width: 600px) {} */


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



/*
======================news+pickup======================= */
.top_page .information .grid_box {
    grid-template-columns: 1fr 1fr;
    color: #fff;
}

.top_page .information .top_news h2,
.top_page .information .pick_up h2 {
    font-family: 'Neuzeit Grotesk';
    font-size: 5rem;
    font-weight: 800;
}


.top_page .information .top_news ul {
    height: 300px;
    margin-bottom: 50px;
    margin-top: 30px;
}

.top_page .information .top_news time {
    font-weight: 300;
}

.top_page .information .category {
    display: inline-block;
    background-color: #fff;
    padding: 2px 15px;
    color: #7a7c82;
    font-weight: 300;
}

.top_page .information a {
    color: #fff;
}

.top_page .information .pick_up {
    /* padding: 20px 8%; */
    /* padding: 45px 3.5% 45px 8%; */
    padding: 2.34vw 3.5% 2.34vw 8%;
    position: relative;
}

.top_page .information .top_news {
    padding: 2.34vw 3.5% 2.34vw 8%;
}

.top_page .information .top_news li {
    margin-bottom: 55px;
}

.top_page .information .top_news li:last-child {
    margin-bottom: none;
}

.top_page .information .top_news {
    grid-column-start: 1;
    background-image: url("../img/top_news.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

}

.top_page .information .top_news>div {
    overflow: scroll;
    width: 100%;
    max-height: 305px;
    margin: 0 auto;
}

.top_page .information .top_news>div::-webkit-scrollbar {
    overflow: hidden;
    width: 1px;
    margin: 0 20px;
}

.top_page .information .top_news>div::-webkit-scrollbar:horizontal {
    height: 1px;
}

.top_page .information .top_news>div::-webkit-scrollbar-button {
    display: none;
}

/* .top_page .information .top_news::-webkit-scrollbar-piece {
    background: #eee;
}

.top_page .information .top_news::-webkit-scrollbar-piece:start {
    background: #eee;
} */

.top_page .information .top_news>div::-webkit-scrollbar-thumb {
    background: #fff;
}

.top_page .information .top_news>div::-webkit-scrollbar-corner {
    background: #fff;
}

.top_page .information .pick_up {
    grid-column-start: 2;
    background-image: url("../img/top_pickup.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

}

.top_page .information .pick_up .play_btn_area {
    display: block;
}

.top_page .information .pick_up .play_btn_area img {
    width: 100%;
    height: 100%;
    max-width: 125px;
    max-height: 125px;
}


.top_page .information .pick_up .play_btn_area a {
    display: inline-block;
}


.top_page .information .pick_up .play_btn_area {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}


.top_page .information .pick_up:hover {
    background-image: url("../img/top_pickup_hover.jpg");
}


.top_page .information .pick_up_info .pick_up_subttl {
    /* font-size: 2.4rem; */
    font-size: 1.25vw;
}

.top_page .information .pick_up_info .pick_up_ttl {
    /* font-size: 3.6rem; */
    font-size: 1.87vw;
}

.top_page .information .pick_up .pick_up_info {
    /* margin-top: 115px; */
    position: absolute;
    /* bottom: 45px; */
    bottom: 2.34vw;
}


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

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

    .top_page .information .pick_up {
        background-image: url("../img/top_pickup@2x.jpg");
    }

    .top_page .information .pick_up:hover {
        background-image: url("../img/top_pickup_hover@2x.jpg");
    }

}


/* ---------------------------sp--------------------------------------- */


@media screen and (max-width: 600px) {

    .top_page .information .top_news,
    .top_page .information .pick_up {
        padding: 20px;
        height: 100%;
        max-height: 180px;
        min-height: 180px;
    }

    .top_page .information .top_news>div {
        max-height: 140px;
    }

    .top_page .information .top_news h2,
    .top_page .information .pick_up h2 {
        font-size: 3rem;
        font-weight: 700;
    }

    .top_page .information .top_news {
        background-image: url("../img/top_news_sp.jpg");
    }

    .top_page .information .top_news .news_inner {
        font-size: 1.4rem;
    }

    .top_page .information .top_news .news_inner .category {
        margin: .5em 0;
    }

    .top_page .information .top_news ul {
        margin: 10px 0 20px;
    }

    .top_page .information .pick_up {
        grid-column-start: 2;
        background-image: url("../img/top_pickup_sp.jpg");
    }

    .top_page .information .pick_up:hover {
        background-image: url("../img/top_pickup_hover_sp.jpg");
    }

    .top_page .information .pick_up .play_btn_area img {
        max-width: 70px;
        max-height: 70px;
    }

    .top_page .information .pick_up .pick_up_info {
        bottom: 15px;
    }

    .top_page .information .pick_up_info .pick_up_ttl,
    .top_page .information .pick_up_info .pick_up_subttl {
        font-size: 1.8rem;
    }

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

        .top_page .information .pick_up {
            grid-column-start: 2;
            background-image: url("../img/top_pickup_sp@2x.jpg");
        }

        .top_page .information .pick_up:hover {
            background-image: url("../img/top_pickup_hover_sp@2x.jpg");
        }


    }



}


/* ======================   people   ======================= */
.top_page .top_people .grid_box {
    grid-template-columns: calc(100%/6) calc(100%/6) calc(100%/6) calc(100%/6) calc(100%/6) calc(100%/6);
    /* grid-auto-rows: 640px 640px; */
    grid-auto-rows: 33.33vw 33.33vw;
}

.top_page .top_people .grid_inner a {
    /* display: inline-block;
    width: fit-content; */
    display: flex;
    align-items: flex-end;
    width: 100%;
    height: 100%;
}

.top_page .top_people .grid_inner .grid_ttl {
    font-family: 'Neuzeit Grotesk';
    /* font-size: 5rem; */
    font-size: 2.60vw;
    font-weight: 700;
}

.top_page .top_people .grid_inner .grid_txt1 h2 {
    font-family: 'Neuzeit Grotesk';
    font-weight: 800;
    /* font-size: 5rem; */
    font-size: 2.60vw;
    color: #fff;
}

.top_page .top_people .grid_inner .grid_txt1 {
    /* padding: 0 80px 80px; */
    padding: 0 4.16vw 4.16vw;
    /* margin: 0 0 65px 12.5%; */

}


.top_page .top_people .grid_inner:first-child .ttl_ruby {
    /* font-size: 3.6rem; */
    font-size: 1.87vw;
    line-height: 2;
    color: #fff;
    font-weight: 500;
}

.top_page .top_people .grid_inner .grid_txt2,
.top_page .top_people .grid_inner .grid_txt3,
.top_page .top_people .grid_inner .grid_txt4 {
    /* max-width: 700px; */
    max-width: 36.45vw;
    width: 100%;
    background-color: #fff;
    color: #258a54;
    /* padding: 40px 0 40px 80px; */
    padding: 2.08vw 4.16vw;
    /* margin-top: 446px; */
    /* border: 1px solid #959597; */
    border-top: 1px solid #969696;
    border-right: 1px solid #969696;
    position: absolute;
    bottom: 0;
}



/* .top_page .top_people .grid_inner:hover .grid_txt1, */
.top_page .top_people .grid_inner:hover .grid_txt2,
.top_page .top_people .grid_inner:hover .grid_txt3,
.top_page .top_people .grid_inner:hover .grid_txt4 {
    color: #fff;
    background-color: #258a54;
}

.top_page .top_people .grid_inner {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}


.top_page .top_people .grid_inner:first-child {
    background-image: url("../img/top_people.jpg");
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 2;
    /* width: 640px; */
    display: flex;
    align-items: flex-end;

}

.top_page .top_people .grid_inner:nth-of-type(2) {
    background-image: url("../img/top_people01.jpg");
    grid-column-start: 3;
    grid-column-end: 7;
    grid-row-start: 1;
    border-left: 1px solid #969696;
}

.top_page .top_people .grid_inner:nth-of-type(3) {
    background-image: url("../img/top_people02.jpg");
    grid-column-start: 1;
    grid-column-end: 4;
    grid-row-start: 2;
    border-top: 1px solid #969696;
}

.top_page .top_people .grid_inner:nth-of-type(4) {
    background-image: url("../img/top_people03.jpg");
    grid-column-start: 4;
    grid-column-end: 7;
    grid-row-start: 2;
    border-top: 1px solid #969696;
    border-left: 1px solid #969696;
}

.top_page .top_people .grid_inner:first-child:hover {
    background-image: url("../img/top_people_hover.jpg");
}

.top_page .top_people .grid_inner:nth-of-type(2):hover {
    background-image: url("../img/top_people01_hover.jpg");
}

.top_page .top_people .grid_inner:nth-of-type(3):hover {
    background-image: url("../img/top_people02_hover.jpg");
}

.top_page .top_people .grid_inner:nth-of-type(4):hover {
    background-image: url("../img/top_people03_hover.jpg");
}







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

@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 2dppx) {
    .top_page .top_people .grid_inner:first-child {
        background-image: url("../img/top_people@2x.jpg");
    }

    .top_page .top_people .grid_inner:nth-of-type(2) {
        background-image: url("../img/top_people01@2x.jpg");
    }

    .top_page .top_people .grid_inner:nth-of-type(3) {
        background-image: url("../img/top_people02@2x.jpg");
    }

    .top_page .top_people .grid_inner:nth-of-type(4) {
        background-image: url("../img/top_people03@2x.jpg");
    }

    .top_page .top_people .grid_inner:first-child:hover {
        background-image: url("../img/top_people_hover@2x.jpg");
    }

    .top_page .top_people .grid_inner:nth-of-type(2):hover {
        background-image: url("../img/top_people01_hover@2x.jpg");
    }

    .top_page .top_people .grid_inner:nth-of-type(3):hover {
        background-image: url("../img/top_people02_hover@2x.jpg");
    }

    .top_page .top_people .grid_inner:nth-of-type(4):hover {
        background-image: url("../img/top_people03_hover@2x.jpg");
    }


}


/* ---------------------------sp--------------------------------------- */


@media screen and (max-width: 600px) {

    .top_page .top_people .grid_inner:first-child {
        background-image: url("../img/top_people_sp.jpg");
    }

    .top_page .top_people .grid_inner:first-child a {
        width: 100%;
        height: 100%;
    }

    .top_page .top_people .grid_inner .grid_txt1 {
        margin: 0;
        padding: 0;
        position: absolute;
        left: 20px;
        bottom: 15px;
    }

    .top_page .top_people .grid_inner .grid_txt1 h2 {
        font-size: 2.2rem;
        font-weight: 700;
        line-height: 1.5;
    }

    .top_page .top_people .grid_inner:first-child .ttl_ruby {
        font-size: 1.8rem;
        font-weight: normal;
        line-height: 1;
    }

    .top_page .top_people .grid_inner .grid_txt2,
    .top_page .top_people .grid_inner .grid_txt3,
    .top_page .top_people .grid_inner .grid_txt4 {
        padding: 15px 20px;
        max-width: 260px;
        border-left: 0;
        border-bottom: 0;
    }

    .top_page .top_people .grid_inner .grid_ttl {
        font-size: 2.2rem;
    }

    .top_page .grid_box .grid_ttl_ruby {
        margin-top: .5em;
        font-size: 1.6rem;
        font-weight: normal;
        line-height: 1;
    }

    .top_page .top_people .grid_inner:nth-of-type(2) {
        background-image: url("../img/top_people01_sp.jpg");
    }

    .top_page .top_people .grid_inner:nth-of-type(3) {
        background-image: url("../img/top_people02_sp.jpg");
    }

    .top_page .top_people .grid_inner:nth-of-type(4) {
        background-image: url("../img/top_people03_sp.jpg");
    }

    .top_page .top_people .grid_inner:first-child:hover {
        background-image: url("../img/top_people_hover_sp.jpg");
    }

    .top_page .top_people .grid_inner:nth-of-type(2):hover {
        background-image: url("../img/top_people01_hover_sp.jpg");
    }

    .top_page .top_people .grid_inner:nth-of-type(3):hover {
        background-image: url("../img/top_people02_hover_sp.jpg");
    }

    .top_page .top_people .grid_inner:nth-of-type(4):hover {
        background-image: url("../img/top_people03_hover_sp.jpg");
    }


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

        .top_page .top_people .grid_inner:first-child {
            background-image: url("../img/top_people_sp@2x.jpg");
        }

        .top_page .top_people .grid_inner:nth-of-type(2) {
            background-image: url("../img/top_people01_sp@2x.jpg");
        }

        .top_page .top_people .grid_inner:nth-of-type(3) {
            background-image: url("../img/top_people02_sp@2x.jpg");
        }

        .top_page .top_people .grid_inner:nth-of-type(4) {
            background-image: url("../img/top_people03_sp@2x.jpg");
        }

        .top_page .top_people .grid_inner:first-child:hover {
            background-image: url("../img/top_people_hover_sp@2x.jpg");
        }

        .top_page .top_people .grid_inner:nth-of-type(2):hover {
            background-image: url("../img/top_people01_hover_sp@2x.jpg");
        }

        .top_page .top_people .grid_inner:nth-of-type(3):hover {
            background-image: url("../img/top_people02_hover_sp@2x.jpg");
        }

        .top_page .top_people .grid_inner:nth-of-type(4):hover {
            background-image: url("../img/top_people03_hover_sp@2x.jpg");
        }
    }

}


/* ======================   people end  ======================= */

/* ======================   ourworks+company   ======================= */

.top_page .top_ourworks .grid_inner,
.top_page .top_company .grid_inner {
    padding: 0;
}

.top_page .top_ourworks .grid_inner h2,
.top_page .top_company .grid_inner h2 {
    font-family: 'Neuzeit Grotesk';
    font-weight: 800;
    font-size: 5rem;
    color: #fff;
}

.top_page .top_ourworks .grid_inner div {
    color: #236689;
}

.top_page .top_company .grid_inner div {
    color: #e15251;
}

.top_page .top_ourworks .grid_inner:hover div,
.top_page .top_company .grid_inner:hover div {
    color: #fff;
}

.top_page .top_ourworks .grid_box,
.top_page .top_company .grid_box {
    grid-template-columns: 1fr 1fr 1fr;
    /* grid-auto-rows: 390px 390px; */
    grid-auto-rows: 20.31vw 20.31vw;
}

.top_page .top_ourworks .grid_inner:first-child,
.top_page .top_company .grid_inner:first-child {
    grid-column-start: 1;
    grid-column-end: 4;
    grid-row-start: 1;
    grid-row-end: 2;
    border-top: 1px solid #38393c;
    border-bottom: 1px solid #38393c;
    display: flex;
    justify-content: center;
    align-items: center;
    /* font-size: 5rem; */
    font-size: 2.60vw;
    color: #fff;
}

.top_page .top_ourworks .grid_inner a,
.top_page .top_company .grid_inner a {
    width: 100%;
    height: 100%;
    display: block;
}

.top_page .top_ourworks .grid_inner:first-child a,
.top_page .top_company .grid_inner:first-child a {
    display: flex;
    justify-content: center;
    align-items: center;
}

.top_page .top_ourworks .grid_inner:first-child .ttl_ruby,
.top_page .top_company .grid_inner:first-child .ttl_ruby {
    /* font-size: 3.6rem; */
    font-size: 1.87vw;
    text-align: center;
    line-height: 2;
    color: #fff;
    font-weight: 500;
}


.top_page .top_ourworks .grid_inner:nth-of-type(2),
.top_page .top_company .grid_inner:nth-of-type(2) {
    grid-column-start: 1;
    grid-row-start: 2;
}

.top_page .top_ourworks .grid_inner:nth-of-type(3),
.top_page .top_company .grid_inner:nth-of-type(3) {
    grid-column-start: 2;
    grid-row-start: 2;
    border-left: 1px solid #38393c;
    border-right: 1px solid #38393c;

}

.top_page .top_ourworks .grid_inner:nth-of-type(4),
.top_page .top_company .grid_inner:nth-of-type(4) {
    grid-column-start: 3;
    grid-row-start: 2;
}

.top_page .top_ourworks .grid_inner:first-child a>div,
.top_page .top_company .grid_inner:first-child a>div {
    margin-top: 0;
    padding-left: 0;
    padding-right: 0;
}


.top_page .top_ourworks .grid_inner a>div,
.top_page .top_company .grid_inner a>div {
    /* padding-top: 85px; */
    /* padding-left: 80px; */
    padding-top: 4.16vw;
    padding-left: 4.16vw;
}

@media screen and (max-width: 600px) {

    .top_page .top_ourworks .grid_inner:first-child .ttl_ruby,
    .top_page .top_company .grid_inner:first-child .ttl_ruby {
        /* font-size: 1.8rem; */
        font-size: 0.93vw;
    }

}

/* ======================   ourworks   ======================= */

.top_page .top_ourworks .grid_inner:first-child {
    background-image: url("../img/top_ourwork.jpg");
}


.top_page .top_ourworks .grid_inner:first-child:hover {
    background-image: url("../img/top_ourwork_hover.jpg");
}

.top_page .top_ourworks .grid_inner:nth-of-type(2):hover,
.top_page .top_ourworks .grid_inner:nth-of-type(3):hover,
.top_page .top_ourworks .grid_inner:nth-of-type(4):hover {
    background-color: #236689;
    color: #fff;
}


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

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

    .top_page .top_ourworks .grid_inner:first-child {
        background-image: url("../img/top_ourwork@2x.jpg");
    }

    .top_page .top_ourworks .grid_inner:first-child:hover {
        background-image: url("../img/top_ourwork_hover@2x.jpg");
    }

}


/* ---------------------------sp--------------------------------------- */


@media screen and (max-width: 600px) {

    .top_page .top_ourworks .grid_box,
    .top_page .top_company .grid_box {
        flex-direction: initial;
        flex-wrap: wrap;
    }

    .top_page .top_ourworks .grid_inner,
    .top_page .top_company .grid_inner {
        padding: 0;
    }

    .top_page .top_ourworks .grid_inner:first-child,
    .top_page .top_company .grid_inner:first-child {
        padding: 0;
        position: relative;
        border-top: none;
    }

    .top_page .top_ourworks .grid_inner:nth-child(3),
    .top_page .top_ourworks .grid_inner:nth-child(4),
    .top_page .top_company .grid_inner:nth-child(3),
    .top_page .top_company .grid_inner:nth-child(4) {
        width: 50%;
    }

    .top_page .top_ourworks .grid_inner:nth-of-type(3),
    .top_page .top_company .grid_inner:nth-of-type(3) {
        border-left: none;
    }

    .top_page .top_ourworks .grid_inner:first-child a,
    .top_page .top_company .grid_inner:first-child a {
        width: 100%;
        height: 100%;
    }

    .top_page .top_ourworks .grid_inner:not(:first-child) a>div,
    .top_page .top_company .grid_inner:not(:first-child) a>div {
        margin-top: 0;
        padding: 0 20px;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .top_page .top_ourworks .grid_inner:first-child a>div,
    .top_page .top_company .grid_inner:first-child a>div {
        margin: 0;
        padding: 0;
        position: absolute;
        left: 20px;
        bottom: 15px;
    }

    .top_page .top_ourworks .grid_inner:first-child h2,
    .top_page .top_company .grid_inner:first-child h2 {
        font-size: 2.2rem;
        font-weight: 700;
        line-height: 1.5;
    }

    .top_page .top_ourworks .grid_inner:not(:first-child) .grid_ttl,
    .top_page .top_company .grid_inner:not(:first-child) .grid_ttl {
        font-size: 2.2rem;
        font-weight: 700;
        line-height: 1;
    }

    /* .top_page .top_ourworks .grid_box .grid_ttl_ruby,
    .top_page .top_company .grid_box .grid_ttl_ruby {
        margin-top: 0;
    } */
    .top_page .top_ourworks .grid_inner:first-child .ttl_ruby,
    .top_page .top_company .grid_inner:first-child .ttl_ruby {
        margin-top: .5em;
        font-size: 1.8rem;
        font-weight: normal;
        line-height: 1;
    }

    .top_page .top_ourworks .grid_inner:first-child {
        background-image: url("../img/top_ourwork_sp.jpg");
    }

    .top_page .top_ourworks .grid_inner:first-child:hover {
        background-image: url("../img/top_ourwork_hover_sp.jpg");
    }

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

        .top_page .top_ourworks .grid_inner:first-child {
            background-image: url("../img/top_ourwork_sp@2x.jpg");
        }

        .top_page .top_ourworks .grid_inner:first-child:hover {
            background-image: url("../img/top_ourwork_hover_sp@2x.jpg");
        }

    }
}


/* ======================   company   ======================= */


.top_page .top_company .grid_inner:first-child {
    background-image: url("../img/top_company.jpg");
}

.top_page .top_company .grid_txt9 {
    padding-left: 0 !important;
}

.top_page .top_company .grid_inner:first-child:hover {
    background-image: url("../img/top_company_hover.jpg");
}

.top_page .top_company .grid_inner:nth-of-type(2):hover,
.top_page .top_company .grid_inner:nth-of-type(3):hover,
.top_page .top_company .grid_inner:nth-of-type(4):hover {
    background-color: #e15251;
    color: #fff;
}


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

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

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

    .top_page .top_company .grid_inner:first-child:hover {
        background-image: url("../img/top_company_hover@2x.jpg");
    }

}


/* ---------------------------sp--------------------------------------- */


@media screen and (max-width: 600px) {

    .top_page .top_company .grid_inner:first-child {
        background-image: url("../img/top_company_sp.jpg");
    }

    .top_page .top_company .grid_inner:first-child:hover {
        background-image: url("../img/top_company_hover_sp@2x.jpg");
    }

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

        .top_page .top_company .grid_inner:first-child {
            background-image: url("../img/top_company_sp@2x.jpg");
        }

        .top_page .top_company .grid_inner:first-child:hover {
            background-image: url("../img/top_company_hover_sp@2x.jpg");
        }

    }
}



/* ======================   recruit   ======================= */


.top_page .top_recruit .grid_box {
    grid-template-columns: 50% 50%;
    /* grid-auto-rows: 320px 320px; */
    grid-auto-rows: 16.66vw 16.66vw;
}

.top_page .top_recruit .grid_inner {
    display: flex;
    align-items: center;
}

.top_page .top_recruit .grid_inner h2 {
    font-family: 'Neuzeit Grotesk';
    font-weight: 800;
    /* font-size: 5rem; */
    font-size: 2.60vw;
    color: #fff;
}

.top_page .top_recruit .grid_inner:first-child .ttl_ruby {
    /* font-size: 3.6rem; */
    font-size: 1.87vw;
    line-height: 2;
    color: #fff;
    font-weight: 500;
}

.top_page .top_recruit .grid_inner div {
    color: #ec9b2c;
}

.top_page .top_recruit .grid_inner:hover div {
    color: #fff;
}

.top_page .top_recruit .grid_inner a {
    width: 100%;
    height: 100%;
    display: block;
}

.top_page .top_recruit .grid_inner:first-child {
    background-image: url("../img/top_recruitinfo.jpg");
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 3;
    border-top: 1px solid #38393c;
    border-bottom: 1px solid #38393c;
}

.top_page .top_recruit .grid_inner .grid_txt13 {
    padding: 0 8.3333% 3vw;
    height: 100%;
    display: flex;
    justify-content: flex-end;
    flex-direction: column;
}

.top_page .top_recruit .grid_inner .grid_txt14,
.top_page .top_recruit .grid_inner .grid_txt15 {
    padding-left: 4vw;
    padding-right: 4vw;
}

.top_page .top_recruit .grid_inner:nth-of-type(2) {
    grid-column-start: 1;
    grid-row-start: 1;
    border-top: 1px solid #38393c;
    border-bottom: 1px solid #38393c;
    border-right: 1px solid #38393c;

}

.top_page .top_recruit .grid_inner:nth-of-type(3) {
    grid-column-start: 1;
    grid-row-start: 2;
    border-bottom: 1px solid #38393c;
    border-right: 1px solid #38393c;

}

.top_page .top_recruit .grid_inner:first-child:hover {
    background-image: url("../img/top_recruitinfo_hover.jpg");
}

.top_page .top_recruit .grid_inner:nth-of-type(2):hover,
.top_page .top_recruit .grid_inner:nth-of-type(3):hover {
    background-color: #ec9b2c;
    color: #fff;
}


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

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

    .top_page .top_recruit .grid_inner:first-child {
        background-image: url("../img/top_recruitinfo@2x.jpg");
    }

    .top_page .top_recruit .grid_inner:first-child:hover {
        background-image: url("../img/top_recruitinfo_hover@2x.jpg");
    }

}


/* ---------------------------sp--------------------------------------- */


@media screen and (max-width: 600px) {

    .top_page .top_recruit .grid_inner:first-child {
        background-image: url("../img/top_recruitinfo_sp.jpg");
    }

    .top_page .top_recruit .grid_inner:first-child:hover {
        background-image: url("../img/top_recruitinfo_hover_sp@2x.jpg");
    }

    .top_page .top_recruit .grid_box {
        flex-direction: initial;
        flex-wrap: wrap;
    }

    .top_page .top_recruit .grid_inner {
        padding: 0;
    }

    .top_page .top_recruit .grid_inner:first-child {
        padding: 0;
        position: relative;
        border-top: none;
    }

    .top_page .top_recruit .grid_inner:nth-child(2),
    .top_page .top_recruit .grid_inner:nth-child(3) {
        width: 50%;
    }

    .top_page .top_recruit .grid_inner:nth-of-type(2) {
        border-top: none;
        border-left: none;
    }

    .top_page .top_recruit .grid_inner:first-child a {
        width: 100%;
        height: 100%;
    }

    .top_page .top_recruit .grid_inner:not(:first-child) div.grid_txt14,
    .top_page .top_recruit .grid_inner:not(:first-child) div.grid_txt15 {
        margin-top: 0;
        padding: 0 20px;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .top_page .top_recruit .grid_inner:first-child a>div {
        margin: 0;
        padding: 0;
        position: absolute;
        left: 20px;
        bottom: 15px;
    }

    .top_page .top_recruit .grid_inner:first-child h2 {
        font-size: 2.2rem;
        font-weight: 700;
        line-height: 1.5;
    }

    .top_page .top_recruit .grid_inner:not(:first-child) .grid_ttl {
        font-size: 2.2rem;
        font-weight: 700;
        line-height: 1;
    }

    /* .top_page .top_recruit .grid_box .grid_ttl_ruby {
        margin-top: .5em;
    } */
    .top_page .top_recruit .grid_inner:first-child .ttl_ruby {
        margin-top: .5em;
        font-size: 1.8rem;
        font-weight: normal;
        line-height: 1;
    }

    .top_page .top_recruit .grid_inner:nth-of-type(3) {
        border-right: none;
    }


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

        .top_page .top_recruit .grid_inner:first-child {
            background-image: url("../img/top_recruitinfo_sp@2x.jpg");
        }

        .top_page .top_recruit .grid_inner:first-child:hover {
            background-image: url("../img/top_recruitinfo_hover_sp@2x.jpg");
        }

    }
}

/* ======================   recruit end  ======================= */



/* ======================   concept  ======================= */
.top_page .concept {
    /* font-size: 8rem; */
    font-size: 4.16vw;
    font-weight: 800;
    color: #7a7c82;
    line-height: 1;
    /* padding: 120px 0; */
    padding: 6.25vw 0;
    display: inline-block;
}

.top_page .concept>div {
    display: block;
    font-family: 'Neuzeit Grotesk';

}

.top_page .concept_content_inner {
    text-align: center;
}


.top_page .concept .red {
    color: #e15251;
}

.top_page .concept .blue {
    color: #236689;
}

.top_page .concept .orange {
    color: #c64a06;
}

.top_page .concept .green {
    color: #258a54;
}

.top_page .concept .yellow {
    color: #ec9b2c;
}

@media screen and (max-width: 600px) {
    .top_page .concept {
        padding: 50px 0px;
        font-size: 3.5rem;
    }
}










/* ======================   concept end  ======================= */




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










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

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


/* ---------------------------sp--------------------------------------- */


@media screen and (max-width: 600px) {}


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



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