@charset "utf-8";

#preloadedImages {
    width: 0;
    height: 0;
    display: inline;
    background-image: url('../img/p_hover_color01.jpg'), url("../img/p_hover_color03.jpg"), url("../img/p_hover_color02.jpg"), url('../img/p_hover_color01@2x.jpg'), url("../img/p_hover_color02@2x.jpg"), url("../img/p_hover_color03@2x.jpg"), url('../img/p_hover_color01_sp.jpg'), url("../img/p_hover_color02_sp.jpg"), url("../img/p_hover_color03_sp.jpg"), url("../img/p_hover_color02_sp@2x.jpg"), url("../img/p_hover_color03_sp@2x.jpg"), url('../img/p_hover_color01_sp@2x.jpg');
}


.company .pc_only {
    display: block;
}

.company .sp_only {
    display: none;
}


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

}

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

}

.people .people_mv .mv_inner {
    display: flex;
    flex-direction: column;
    align-items: center;
}

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

.people .grid_ttl {
    color: #258a54;
    font-family: 'Neuzeit Grotesk';
    /* font-size: 5rem; */
    font-size: 2.60vw;
    font-weight: 800;
}

.people .content_box .grid_ttl_ruby,
.people .content_box .ttl_ruby {
    color: #258a54;
    /* font-size: 2.2em; */
    font-size: 1.82vw;
    font-weight: 400;
    white-space: nowrap;
}

.people .people_mv .people_inner h1 {
    margin-bottom: 4rem;
}

.people .people_mv .ttl_ruby {
    color: #fff;
    /* font-size: 2.5em; */
    font-size: 2.1vw;
    font-weight: 500;
}

.people .description .content_inner {
    padding: 0 40px;
    width: 100%;
    margin: 40px auto 50px;
    text-align: center;
    font-size: 1.5em;
}

.people .content_box {
    max-height: 780px;
    height: 40.624vw;
}

.people .content_box .content_inner,
.people .content_box .content_inner .grid_box {
    height: 100%;
}

.people .grid_box {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* grid-auto-rows: 390px 390px; */
    border-top: 1px solid #38393c;
    border-right: 1px solid #38393c;
    border-left: 1px solid #38393c;
}

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

}

.people .content_box .content_inner a {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-end;
}

.people .grid_box .grid_inner {
    background-position: center top;
}

.people .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/people01.jpg");
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    border-bottom: 1px solid #38393c;
    border-right: 1px solid #38393c;
}



.people .grid_box .grid_inner:nth-child(2) {
    background-image: url("../img/people02.jpg");
    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;

}

.people .grid_box .grid_inner:nth-child(3) {
    background-image: url("../img/people03.jpg");
    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;


}


.people .grid_box .grid_inner:first-child:hover {
    background-image: url('../img/p_hover_color01.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    transition: .3s;
    -webkit-transition: .3s;
    -moz-transition: .3s;
    -ms-transition: .3s;
    -o-transition: .3s;
}


.people .grid_box .grid_inner:nth-child(2):hover {
    background-image: url("../img/p_hover_color02.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    transition: .3s;
    -webkit-transition: .3s;
    -moz-transition: .3s;
    -ms-transition: .3s;
    -o-transition: .3s;


}

.people .grid_box .grid_inner:nth-child(3):hover {
    background-image: url("../img/p_hover_color03.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    transition: .3s;
    -webkit-transition: .3s;
    -moz-transition: .3s;
    -ms-transition: .3s;
    -o-transition: .3s;
}

.people .content_box .content_inner,
.people .content_box .content_inner .grid_box {
    height: 100%;
}

.people .grid_inner:hover .grid_txt1,
.people .grid_inner:hover .grid_txt2,
.people .grid_inner:hover .grid_txt3 {
    background: #258a54;
    transition: .3s;
    -webkit-transition: .3s;
    -moz-transition: .3s;
    -ms-transition: .3s;
    -o-transition: .3s;
}

.people .grid_inner:hover .grid_ttl,
.people .grid_inner:hover .grid_ttl_ruby {
    color: #fff;
}


.people .grid_txt1,
.people .grid_txt2,
.people .grid_txt3 {
    max-height: 100%;
}

.people .grid_txt1 {
    background: #fff;
    padding: 4.8% 8%;
    width: 74.5%;
    border-top: 1px solid #38393c;
    border-right: 1px solid #38393c;
}

.people .grid_txt2,
.people .grid_txt3 {
    background: #fff;
    padding: 3% 8%;
    width: 68%;
    border-top: 1px solid #38393c;
    border-right: 1px solid #38393c;
}

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

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

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

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

    }

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

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

    .people .grid_box .grid_inner:nth-child(2):hover {
        background-image: url("../img/p_hover_color02@2x.jpg");
    }

    .people .grid_box .grid_inner:nth-child(3):hover {
        background-image: url("../img/p_hover_color03@2x.jpg");


    }

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

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

        .people .pc_only {
            display: none;
        }

        .people .sp_only {
            display: block;
        }

        .people .people_mv {
            background-image: url("../img/people_mv_sp.jpg");
        }

        .people .content_box {
            height: auto;
        }


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

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

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


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

        .people .people_mv {
            height: auto;
        }

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

        .people .content_box .grid_ttl_ruby,
        .people .content_box .ttl_ruby {
            font-size: 1.6rem;
            white-space: normal;
            padding-bottom: 2px;
        }

        .people .people_mv .ttl_ruby {
            font-size: 1.8rem;
        }

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

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

        .people .grid_box .grid_inner {
            width: 100%;
            height: 190px;
            background-size: cover;
            background-position: center top;
        }


        .people .grid_box .grid_inner:first-child {
            background-image: url("../img/people01_sp.jpg");
        }

        .people .grid_box .grid_inner:nth-child(2) {
            background-image: url("../img/people02_sp.jpg");
        }

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


        .people .grid_box .grid_inner:first-child:hover {
            background-image: url('../img/p_hover_color01_sp.jpg');
        }


        .people .grid_box .grid_inner:nth-child(2):hover {
            background-image: url("../img/p_hover_color02_sp.jpg");
        }

        .people .grid_box .grid_inner:nth-child(3):hover {
            background-image: url("../img/p_hover_color03_sp.jpg");
        }

        .people .grid_txt1,
        .people .grid_txt2,
        .people .grid_txt3 {
            max-width: 270px;
        }

        .people .grid_txt3 .grid_ttl_ruby span {
            white-space: nowrap;
        }

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

        .people .grid_txt1,
        .people .grid_txt2,
        .people .grid_txt3 {
            padding: .25em 6.25%;
            width: 69%;

        }

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


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

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

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

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


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


            .people .grid_box .grid_inner:nth-child(2):hover {
                background-image: url("../img/p_hover_color02_sp@2x.jpg"), ;
            }

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



        }


    }