@charset "utf-8";
/*--京home.css--*/
.contents{
    overflow-x: hidden;
    overflow-y: hidden;
    padding-top: 0;
}

.mainvisual_news_intro_msg_box_wrapper{
    padding-top: 8rem;
    position: relative;
}

    .mainvisual_news_intro_msg_box_wrapper::before{
        content: "";
        display: block;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 0;
        /*
        background-image: url(../shared/home/bg_introduction.png);
        background-size: 1.5rem auto;
        */
    }

    .mainvisual{
        position: relative;
        margin-left: calc(4vw + 4rem);
    }

        .slide_obj{
            height: 40rem;
        }

            .slide_obj img{
                height: 100%;
                width: auto;
            }

    .mv_slider .slick-dots{
        bottom: 0.75rem;
    }

    .mv_slider .slick-dotted.slick-slider{
        margin-bottom: 0;
    }

    .mv_slider .slick-dots li button::before{
        color: #fff;
        opacity: 0.75;
        font-size: 8px;
    }

    .mv_slider .slick-dots li.slick-active button::before{
        color: #1e3c7d;
        opacity: 1;
    }

    .news_box{
        display: flex;
        position: relative;
        margin-left: 30vw;
        margin-bottom: 5rem;
    }

        .news_box > .box_header{
            width: 15rem;
            height: 5rem;
        }

            .news_box > .box_header h2{
                background: #1e3c7d;
                height: 100%;
                transition: .3s all ease;
            }

            .news_box > .box_header h2:hover{
                filter: brightness(1.5);
            }

                .news_box > .box_header h2 a{
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    gap: 1rem;
                    height: 100%;
                }

                    .news_box > .box_header h2 a .lbl{
                        width: 8.5rem;
                    }

                        .news_box > .box_header h2 a .lbl img{
                            max-width: 100%;
                            height: auto;
                        }

                    .news_box > .box_header h2 a::after{
                        content: "";
                        width: 2.25rem;
                        height: 2.25rem;
                        border-radius: 50%;
                        background: rgba(255,255,255,0.5);
                        background-image: url(../shared/icon/icon_arr1.png);
                        background-repeat: no-repeat;
                        background-size: 1rem auto;
                        background-position: center center;
                    }

        .news_box > .box_inner{
            background: #333;
            color: #fff;
            line-height: 1.4;
            display: flex;
            align-items: center;
            flex: 1;
            padding-left: 2rem;
        }

            .news_box > .box_inner ul li{
                display: flex;
            }

                .news_box > .box_inner ul li .entry_date{
                    margin-right: 1em;
                }

                .news_box > .box_inner ul li .entry_title{
                    flex: 1;
                }

            .news_box > .box_inner a{
                text-decoration: none;
                color: #fff;
            }

            .news_box > .box_inner a:hover{
                text-decoration: underline;
            }

    .intro_msg_box{
        position: relative;
        width: 1200px;
        margin: 0 auto;
        padding-bottom: 6rem;
    }

        .intro_msg_box > .box_header{
            display: flex;
            justify-content: center;
            margin-bottom: 4rem;
        }

            .intro_msg_box > .box_header p{
                display: flex;
                flex-direction: column;
                font-size: 2rem;
                line-height: 2;
                font-weight: 700;
                color: #212121;
            }

                .intro_msg_box > .box_header p .underline{
                    position: relative;
                    display: inline-block;
                    z-index: 0;
                    padding: 0 0.2em;
                    margin-left: 0.1em;
                }

                    .intro_msg_box > .box_header p .underline::after{
                        content: "";
                        display: block;
                        width: 100%;
                        height: 0;
                        position: absolute;
                        bottom: 0.5em;
                        left: 0;
                        z-index: -1;
                        /*border-bottom: 1rem solid #fff;*/
                        border-bottom: 1rem solid rgba(275,191,0,0.4);
                    }

        .intro_msg_box > .box_inner ul{
            display: flex;
            gap: 1rem;
        }

            .intro_msg_box > .box_inner ul li{
                width: calc((100% - 1rem) / 2);
            }

                .intro_msg_box > .box_inner ul li img{
                    max-width: 100%;
                    height: auto;
                }

.common_box{
    width: 1200px;
    position: relative;
    margin: 0 auto;
}

    .common_box::before{
        content: "";
        display: block;
        margin: 0 calc(50% - 50vw);
        width: 100vw;
        height: 100%;
        background: #ccc;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 0;
    }


    .common_box > .box_header{
        position: relative;
        z-index: 1;
    }

        .common_box .hdg{
            display: flex;
            flex-direction: column-reverse;
        }

            .common_box .hdg h2{
                font-size: 1.1rem;
                margin-top: 0.75em;
                color: #fff;
                font-weight: 600;
            }

            .common_box .hdg p{
                height: 4.5rem;
            }

                .common_box .hdg p img{
                    height: 100%;
                    width: auto;
                }
        
        .common_box .goto_detail{}
        
        .common_box .goto_detail a,
        .common_box .goto_detail .no_link{
            color: #fff;
            text-decoration: none;
            display: flex;
            align-items: center;
            font-size: 1.125rem;
        }

            .common_box .goto_detail a::after,
            .common_box .goto_detail .no_link::after{
                content: "";
                background: rgba(255,255,255,1);
                display: block;
                width: 2.25rem;
                height: 2.25rem;
                margin-left: 1.25em;
                border-radius: 50%;
                background-repeat: no-repeat;
                background-size: 1rem auto;
                background-position: center center;
                background-image: url('../shared/icon/icon_arr1.png');
                transition: .3s all ease;
            }

            .common_box .goto_detail a:hover::after,
            .common_box .goto_detail .no_link:hover::after{
                transform: translateX(0.25rem);
            }

    .common_box > .box_inner{
        position: relative;
        z-index: 1;
    }

    .common_box > .box_footer{
        position: relative;
        z-index: 1;
    }

.service_box{
    margin-bottom: 1rem;
    padding: 7rem 0 5rem;
}

    .service_box::before{
        background-image: url('../shared/home/bg_service.png');
        background-size: 1.5rem auto;
    }

    .service_box > .box_header{
        margin-bottom: 3rem;
    }

        .service_box > .box_header .hdg{
            align-items: center;
        }

        .service_box > .box_header .goto_detail{
            position: absolute;
            top: 1rem;
            right: 1rem;
        }

            .service_box > .box_header .goto_detail a::after{
                background-image: url('../shared/icon/icon_arr3.png');
            }

    .service_box > .box_inner{
        display: flex;
        flex-direction: column;
    }

        .service_box > .box_inner p{
            color: #fff;
            line-height: 1.8;
            margin: 0 auto 3rem;
        }

        .service_box > .box_inner ul{
            display: flex;
            justify-content: center;
            gap: 3rem;
        }

            .service_box > .box_inner ul li{

            }

                .service_box > .box_inner ul li a{
                    display: flex;
                    flex-direction: column;
                    color: #fff;
                    text-decoration: none;
                }

                    .service_box > .box_inner ul li a .fig{
                        width: 18rem;
                        margin-bottom: 1rem;
                    }

                        .service_box > .box_inner ul li a .fig img{
                            max-width: 100%;
                            height: auto;
                            transition: .3s all ease;
                            transform-origin: center bottom;
                        }

                        .service_box > .box_inner ul li a:hover .fig img{
                            transform: scale(1.1);
                            filter: brightness(1.2);
                            box-shadow: 0 0 10px 1px rgba(0,0,0,0.2);
                        }

                    .service_box > .box_inner ul li a .lbl{
                        position: relative;
                        text-align: center;
                        font-size: 1.5rem;
                        font-weight: 600;
                    }

                        .service_box > .box_inner ul li a .lbl::after{
                            content: "";
                            display: block;
                            width: 1rem;
                            height: 1rem;
                            background-image: url('../shared/icon/icon_arr4.png');
                            background-repeat: no-repeat;
                            background-size: contain;
                            position: absolute;
                            right: 0;
                            top: calc(50% - 0.5rem);
                        }

                        .service_box > .box_inner ul li a .lbl::before{
                            content: "";
                            display: block;
                            width: 100%;
                            height: 0;
                            border-bottom: 1px solid #fff;
                            position: absolute;
                            bottom: -0.3em;
                            left: 0;
                            transition: .3s all ease;
                            transform: scaleX(0);
                            opacity: 0;
                            transform-origin: left bottom;
                        }

                        .service_box > .box_inner ul li a:hover .lbl::before{
                            opacity: 1;
                            transform: scaleX(1);
                        }

.works_box{
    margin-bottom: 1rem;
}

    .works_box::before{
        background-image: url('../shared/home/bg_works.jpg');
        background-size: cover;
        z-index: -1;
    }

    .works_box::after{
        content: "";
        background: rgba(0,0,0,0.6);
        display: block;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 0;
        margin: 0 calc(50% - 50vw);
        width: 100vw;
        height: 100%;
    }

    .works_box > .box_inner{
        
    }

        .works_box > .box_inner a{
            display: flex;
            justify-content: center;
            align-items: center;
            text-decoration: none;
            height: 15rem;
            position: relative;
            transition: .3s all ease;
        }

        .works_box > .box_inner a:hover{
        }

            .works_box > .box_inner a::before{
                content: "";
                display: block;
                width: 100%;
                height: 100%;
                position: absolute;
                top: 0;
                left: 0;
                background: #000000;
                background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 30%, rgba(0, 0, 0, 0.8) 50%, rgba(0, 0, 0, 0.8) 70%, rgba(0, 0, 0, 0) 100%);            
                transition: .5s all ease;
                opacity: 0;
            }

            .works_box > .box_inner a:hover::before{
                opacity: 1;
            }

            .works_box > .box_inner a .hdg{
                align-items: center;
                position: relative;
                z-index: 1;
            }

        .works_box > .box_inner a .goto_detail{
            position: absolute;
            z-index: 1;
            top: 5rem;
            right: 1rem;
        }


.company_box{
    padding-bottom: 5.5rem;
    width: 100%;
}

    .company_box::before{
        background-image: url('../shared/home/bg_company.png');
        background-size: 1.5rem auto;
    }

    .company_box > .box_inner{
        display: flex;
        justify-content: center;
        margin-bottom: 5.5rem;
    }

        .company_box > .box_inner .fig{
            flex: 1;
            background-image: url('../shared/home/img_company.jpg');
            background-size: auto 100%;
            background-position: right top;
            background-repeat: no-repeat;
        }

        .company_box > .box_inner .fig img{
            max-width: 100%;
            height: auto;
        }

        .company_box > .box_inner .text{
            box-sizing: border-box;
            width: 50%;
            padding: 7rem 10vw 0 6rem;
        }

            .company_box > .box_inner .text .hdg{
                margin-bottom: 3rem;                
            }

            .company_box > .box_inner .text .exp{
                color: #fff;
                line-height: 2;
                margin-bottom: 5rem;
            }

            .company_box > .box_inner .text .goto_detail{
                display: flex;
                justify-content: flex-end;
            }

    .company_box > .box_footer{}

        .company_box > .box_footer ul{
            display: flex;
            justify-content: center;
            gap: 1rem;
        }

            .company_box > .box_footer ul li{
                width: 22.5rem;
                height: 6.5rem;
            }

                .company_box > .box_footer ul li a{
                    box-sizing: border-box;
                    position: relative;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    background: #fff;
                    text-decoration: none;
                    color: #141950;
                    width: 100%;
                    height: 100%;
                    font-weight: 700;
                    font-size: 1.375rem;
                    padding-top: 0.15em;
                    transition: .3s all ease;
                }

                .company_box > .box_footer ul li a:hover{
                    box-shadow: 0 0 0 1px rgba(255,255,255,0.7);
                }

                    .company_box > .box_footer ul li a::before{
                        content: "";
                        display: block;
                        width: 100%;
                        height: 100%;
                        background: #141950;
                        position: absolute;
                        top: 0;
                        left: 0;
                        z-index: 0;
                        transition: .3s all ease;
                        opacity: 0;
                        transform: scaleX(0);
                        transform-origin: left bottom;
                    }

                    .company_box > .box_footer ul li a:hover::before{
                        opacity: 1;
                        transform: scaleX(1);
                    }

                    .company_box > .box_footer ul li a::after{
                        content: "";
                        display: block;
                        width: 1rem;
                        height: 1rem;
                        position: absolute;
                        top: calc(50% - 0.5rem);
                        right: 2rem;
                        z-index: 1;
                        background-image: url('../shared/icon/icon_arr1.png');
                        background-size: contain;
                        background-repeat: no-repeat;
                        transition: .3s all ease;
                    }

                    .company_box > .box_footer ul li a:hover::after{
                        filter: brightness(0) invert(1);
                    }

                    .company_box > .box_footer ul li a .lbl{
                        position: relative;
                        z-index: 1;
                        transition: .3s all ease;
                    }

                    .company_box > .box_footer ul li a:hover .lbl{
                        color: #fff;
                    }

.recruit_box{
    padding: 5rem 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .recruit_box::before{
        background-image: url('../shared/home/bg_recruit.png');
        background-size: 1.5rem auto;
    }

    .recruit_box .hdg h2{
        color: #141950;
    }

    .recruit_box > .box_inner p{
        width: 33rem;
    }

        .recruit_box > .box_inner p a{
            display: block;
            width: 100%;
            height: 100%;
            position: relative;
            text-decoration: none;
            transition: .3s all ease;
        }

        .recruit_box > .box_inner p a:hover{
            box-shadow: 0 0 10px 1px rgba(0,0,0,0.2);
        }

            .recruit_box > .box_inner p a::before{
                box-sizing: border-box;
                content: "";
                display: block;
                width: 100%;
                height: 100%;
                position: absolute;
                top: 0;
                left: 0;
                z-index: 1;
                background: rgba(0,0,0,0.7);
                border: 0.375rem solid rgba(255,255,255,0.5);
                transition: .3s all ease;
            }

            .recruit_box > .box_inner p a:hover::before{
                background: rgba(0,0,0,0.8);
                border: 0.375rem solid rgba(255,255,255,1);
            }

            .recruit_box > .box_inner p a::after{
                content: "";
                width: 2.25rem;
                height: 2.25rem;
                border-radius: 50%;
                background: #f0f0f0;
                background-image: url(../shared/icon/icon_arr1.png);
                background-repeat: no-repeat;
                background-size: 1rem auto;
                background-position: center center;
                position: absolute;
                top: calc(50% - 1.125rem);
                right: 2rem;
                z-index: 3;
                transition: .3s all ease;
            }

            .recruit_box > .box_inner p a:hover::after{
                transform: translateX(0.25rem);
            }

            .recruit_box > .box_inner p a .lbl{
                position: absolute;
                top: calc(50% - 0.75rem);
                left: 0;
                z-index: 2;
                font-size: 1.5rem;
                color: #fff;
                font-weight: 600;
                text-align: center;
                width: 100%;
            }

                .recruit_box > .box_inner p a .lbl::after{
                    content: "";
                    width: 4.5em;
                    height: 0;
                    border-bottom: 0.1875rem solid #fff;
                    position: absolute;
                    bottom: -0.75em;
                    left: calc(50% - 2.25em);
                }

            .recruit_box > .box_inner p a .fig{
                display: block;
                position: relative;
                z-index: 0;
            }

                .recruit_box > .box_inner p a .fig img{
                    max-width: 100%;
                    height: auto;
                }

/*1350px以下*/
@media screen and (min-width:1px) and (max-width:1350px){
    .mainvisual{
        margin-left: 0;
    }

    .slide_obj {
        height: 45vw;
    }
}



/*1200px以下*/
@media screen and (min-width:1px) and (max-width:1200px){
    .intro_msg_box{
        box-sizing: border-box;
        width: 100%;
        padding-left: 4vw;
        padding-right: 4vw;
    }

    .news_box{
        margin-left: 0;
    }

    .common_box{
        box-sizing: border-box;
        width: 100%;
        padding-left: 4vw;
        padding-right: 4vw;
    }

    .company_box{
        padding-left: 0;
    }

    .company_box > .box_footer{
        padding-left: 4vw;
    }
}

/*ipad*/
@media screen and (min-width:1px) and (max-width:1024px){
    .common_box .hdg p{
        height: 4rem;
    }

    .service_box > .box_inner p{
        width: 80%;
        margin: 0 auto 3rem;
    }

    .service_box > .box_inner ul{
        gap: 2rem;
    }

        .service_box > .box_inner ul li{
            flex: 1;
        }

        .service_box > .box_inner ul li a .fig{
            width: 100%;
        }

    .company_box > .box_inner .text{
        width: 60%;
        padding: 5rem 0vw 0 3rem;
    }

    .company_box > .box_footer ul li{
        width: auto;
        flex: 1;
    }

    .recruit_box > .box_inner{
        flex: 1;
        padding-left: 3rem;
    }

        .recruit_box > .box_inner p{
            width: 100%;
        }

}

/* ##########SP########## */
@media screen and (min-width:1px) and (max-width:575px) {
    .mainvisual_news_intro_msg_box_wrapper{
        padding-top: 16vw;
    }

    .slide_obj{
        width: 100vw;
        height: 52vw;
    }

        .slide_obj img{
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center center;
        }

        .slide_obj.slide1 img{
            object-position: left center;
        }

    .news_box{
        margin-left: 0;
        margin-bottom: 2rem;
    }

        .news_box > .box_header{
            width: 9rem;
            height: 4rem;
        }

        .news_box > .box_header h2 a{
            gap: 0.75rem;
        }

        .news_box > .box_header h2 a .lbl{
            width: 5rem;
        }

        .news_box > .box_header h2 a::after{
            width: 1.5rem;
            height: 1.5rem;
            background-size: 0.75rem auto;
        }

        .news_box > .box_inner{
            padding-left: 1rem;
        }

        .news_box > .box_inner ul li{
            flex-direction: column;
            font-size: 0.84rem;
        }

            .news_box > .box_inner ul li .entry_date{
                margin-right: 0;
                margin-bottom: 0.2em;
            }

    .intro_msg_box{
        padding-bottom: 3rem;
    }

    .intro_msg_box > .box_header{
        margin-bottom: 2rem;
    }

        .intro_msg_box > .box_header p{
            font-size: 1.4rem;
            line-height: 1.6;
            align-items: center;
        }

            .intro_msg_box > .box_header p .lbl2{
                display: flex;
                flex-direction: column;
                align-items: center;
            }

    .common_box .hdg p{
        height: 3rem;
    }

    .common_box .goto_detail a,
    .common_box .goto_detail .no_link{
        font-size: 1.05rem;
    }

    .common_box .goto_detail a::after,
    .common_box .goto_detail .no_link::after{
        width: 2rem;
        height: 2rem;
        background-size: 0.75rem auto;
    }

    .service_box{
        padding-top: 4rem;
        padding-bottom: 3rem;
    }

    .service_box > .box_header{
        display: flex;
        flex-direction: column;
        align-items: center;
    }

        .service_box > .box_header .hdg{
            margin-bottom: 2rem;
        }

        .service_box > .box_header .goto_detail{
            position: relative;
            top: auto;
            right: auto;
        }

    .service_box > .box_inner p{
        width: 90%;
        margin-bottom: 2rem;
    }

    .service_box > .box_inner ul{
        flex-direction: column;
        gap: 1rem;
        width: 90%;
        margin: 0 auto;
    }

        .service_box > .box_inner ul li a{
            flex-direction: row;
            align-items: center;
        }

            .service_box > .box_inner ul li a .fig{
                width: 38%;
                margin: 0;
            }

            .service_box > .box_inner ul li a .lbl{
                flex: 1;
                text-align: left;
                display: flex;
                align-items: center;
                font-size: 1.3rem;
                padding-left: 0;
                margin-left: 0.8em;
            }

        .works_box > .box_inner a{
            flex-direction: column;
        }

        .works_box > .box_inner a .hdg{
            margin-bottom: 2rem;
        }

        .works_box > .box_inner a .goto_detail{
            position: relative;
            top: auto;
            right: auto;
        }

    .company_box{
        padding-bottom: 3rem;
        padding-left: 4vw;
    }

    .company_box > .box_inner{
        flex-direction: column-reverse;
        margin-bottom: 2rem;
    }

        .company_box > .box_inner .fig{
            width: 90%;
            aspect-ratio: 1880 / 1040;
            margin: 0 auto;
        }

        .company_box > .box_inner .text{
            width: auto;
            padding: 3rem 0;
        }

        .company_box > .box_inner .text .hdg{
            align-items: center;
        }

        .company_box > .box_inner .text .exp{
            margin-left: auto;
            margin-right: auto;
            margin-bottom: 1.5rem;
            width: 90%;
        }

        .company_box > .box_inner .text .goto_detail{
            justify-content: center;
        }

    .company_box > .box_footer{
        padding-left: 0;
    }

    .company_box > .box_footer ul{
        flex-direction: column;
        align-items: center;
    }

        .company_box > .box_footer ul li{
            flex: initial;
            height: 4rem;
            width: 90%;
        }

        .company_box > .box_footer ul li a::after{
            width: 0.75rem;
            height: 0.75rem;
            top: calc(50% - 0.375rem);
            right: 1rem;
        }

    .recruit_box{
        padding-top: 3rem;
        padding-bottom: 3rem;
        flex-direction: column;
    }

        .recruit_box > .box_header{
            margin-bottom: 1rem;
        }

            .recruit_box > .box_header .hdg{
                align-items: center;
            }

        .recruit_box > .box_inner{
            padding-left: 0;
        }

            .recruit_box > .box_inner p{
                width: 90%;
                margin: 0 auto;
            }

            .recruit_box > .box_inner p a::after{
                width: 2rem;
                height: 2rem;
                background-size: 0.75rem auto;
                top: calc(50% - 1rem);
                right: 1.5rem;
            }


}