@charset "UTF-8";
/* CSS Document */
.mainvisual {
        position: relative;
        margin-top: 130px;
}

.mainvisual .text {
        position: absolute;
        top: 37%;
        left: calc(50vw - 8em);
        color: #fff;
        z-index: 99;
        font-size: 4.3rem;
        letter-spacing: 0.5em;
}
.mainvisual video {
        height: 580px;
        object-fit: cover;
        width: 100%;
        display: block;
}

.mainvisual .inner {
        display: flex;
}

.mainvisual .inner1 {
        width: 15%;
        white-space: nowrap;
}
.mainvisual .inner2 {
        width: 70%;
        line-height: 160%;
        white-space: nowrap;
}
.mainvisual .inner3 {
        flex: 1;
        align-self: end;
        font-size: 12px;
        white-space: nowrap;
}
.mainvisual .history_date {
        display: inline-block;
        width: 120px;
}

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

        .mainvisual .inner {
                display: flex;
                flex-flow: column;
        }

        .mainvisual .inner1 {
                min-height: 25px;
                white-space: nowrap;
                font-size: 13px;
                font-weight: bold;
        }
        .mainvisual .inner2 {
                width: 100%;
                overflow: hidden;
                line-height: 170%;
                font-size: 13px;
        }
        .mainvisual .inner3 {
                margin-top: 8px;
                align-self: end;
                font-size: 12px;
                white-space: nowrap;
        }
        .mainvisual .history_date {
                display: inline-block;
                width: 90px;

        }


}


.title_area {
        height: 275px;
        width: 100%;
}

.btn_about_sp {
        display:none;
}

@media screen and (max-width:816px) {
        .mainvisual {
                margin-top: 60px;
        }

        .mainvisual .text {
                text-align: center;
                top: 25%;
                left: calc(50vw - 4.3em);
                font-size: 7.5vw;
        }
        .mainvisual video {
                height: auto;
        }
/*
        .mainvisual .slick{
                width: 100%;
                height: calc(100vh - 60px);
        }

        .mainvisual .slick.pc {
                display:none;
        }

        .mainvisual .slick.sp {
                display:block;
        }

        .mainvisual li img {
                height:calc(100vh - 60px);
                object-fit: cover;
        }
*/
        .btn_about_sp {
                z-index: 99;
                position: absolute;
                bottom: 20%;
                left: calc(50vw - 30vw);
                display:block;
                width: 60vw;
        }

        .btn_about_sp img {
                width: 100%;
        }

}

/*
※※※※※※※※※※※※※※※※

OUR SERVICE

※※※※※※※※※※※※※※※※
*/
.ourservice {
        background:linear-gradient(180deg,#081b91 0%,#081b91 30%,#f2f2f2 30%,#f2f2f2 100%);
        padding: 35px 0 0;
}

.ourservice .inner {
        max-width: 1000px;
}

.ourservice .title {
        color: #fff;
        float:left;
        font-size: 3.7rem;
        letter-spacing: 0.1em;
        position: relative;
        padding-bottom: 0.5em;
        margin: 0.5em 0 1em;
}

.ourservice .title:before {
        content:'';
        display: block;
        width:3.5em;
        height: 3px;
        background-color: #fff;
        position: absolute;
        bottom: 0;
}

.ourservice .btn_about {
        float:right;
}

.ourservice .btn_about img{
        width: 411px;
        margin-bottom: 35px;
}

.service_list {
        clear:both;
        padding-bottom: 60px;
}

.service_list li {
        width: 24.9%;
        margin-bottom: 40px;
        padding: 0 1px;
}

.service_list li img {
        width: 100%;
        vertical-align: bottom;
}

.service_list .image {
        position: relative;
}

.service_list .over {
        position: absolute;
        top:0;
        left:0;
        z-index: 2;
        background-color: rgba(42,166,191,0.7);
        width: 100%;
        height: 100%;
        font-size: 1.4rem;
        color: #fff;
        text-align: center;
        padding-top: 30%;
        -webkit-transition: 0.3s ease-in-out;
  -moz-transition: 0.3s ease-in-out;
  -o-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
        opacity: 0;
}

.service_list .over:before {
        content:'';
        display: block;
        position: absolute;
        width: 2em;
        height: 1px;
        top: calc(50% + 1em);
        left: calc(50% - 1em);
        background-color: #fff;
}

.service_list .yakkan {
        position: absolute;
        top:0;
        left:0;
        z-index: 2;
        background-color: rgba(42,166,191,1);
        width: 100%;
        height: 100%;
        font-size: 2.2rem;
        color: #fff;
        text-align: center;
        padding-top: 30%;
        letter-spacing: 0.1em;
}

.service_list .yakkan:before {
        content:'>';
        position: absolute;
        top: 41.7%;
        left: calc(50% - 3.5em);
        font-size: 2rem;
        font-weight: bold;
}

.service_list .link_name .en {
        font-size: 2rem;
        text-align: center;
        color: #081b91;
        margin: 1.3em 0 0.1em;
}
/*
.service_list .link_name .en {
        font-size: 1.4rem;
        text-align: center;
        color: #666666;
        letter-spacing: -0.01em;
}
*/

@media screen and (max-width:1324px) {
        .service_list .link_name .en {
                font-size: 1.6vw;
                margin: 1.3em 0 0.1em;
        }
/*
        .service_list .link_name .en {
                font-size: 1.2rem;
        }
        */
}

@media screen and (max-width:767px) {
        .ourservice {
                background:linear-gradient(180deg,#081b91 0%,#081b91 15%,#f2f2f2 15%,#f2f2f2 100%);
                padding: 35px 0 0;
        }

        .ourservice .title {
                font-size: 3rem;
        }

        .ourservice .btn_about {
                display: none;
        }

        .service_list li {
                width: 49.8%;
                margin-bottom: 40px;
        }

        .service_list .yakkan {
                position: absolute;
                top:0;
                left:0;
                z-index: 2;
                background-color: rgba(42,166,191,1);
                width: 100%;
                height: 100%;
                font-size: 1.8rem;
                color: #fff;
                text-align: center;
                padding-top: 13vw;
                letter-spacing: 0.1em;
        }

        .service_list .yakkan:before {
                content:'>';
                position: absolute;
                top: 12.5vw;
                left: calc(50% - 3em);
                font-size: 2rem;
                font-weight: bold;
        }

        .service_list .link_name .en {
                font-size: 4vw;
                margin: 1.3em 0 0.1em;
        }
}

/*
※※※※※※※※※※※※※※※※

採用情報

※※※※※※※※※※※※※※※※
*/

.recruit {
        padding: 100px 0;
        background-image: url("../images/home/recruit_bg.jpg");
        width: 100%;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
}

.recruit .inner {
        max-width: 825px;
}

.recruit .title {
        background-color: #fff;
        color: #a9aeb1;
        font-size: 2.3rem;
        text-align: center;
        line-height: 2em;
        width: 12em;
        margin: 0 0 1em;
        letter-spacing: 0.1em;
}

.recruit .catchcopy {
        font-size: 5.1rem;
        letter-spacing: 0.4em;
        color: #fff;
        font-weight: bold;
        margin-bottom: 50px;
}

.recruit .wrap_btn li {
        width: 40%;
        line-height: 90px;
        font-size: 2.5rem;
        font-weight: bold;
}
.recruit .wrap_btn li:first-child {
        margin-bottom: 20px;
}

.recruit .wrap_btn a {
        display: block;
        border:2px solid #fff;
        color: #fff;
        padding-left: 15%;
        position: relative;
}

.recruit .wrap_btn a:before {
        content:'>';
        font-size: 0.7em;
        line-height: 90px;
        display:inline-block;
        position: absolute;
        left: 10%;
        top: -2%;

}

.recruit .wrap_btn a:hover {
        background-color: #fff;
        color: #666;
}

@media screen and (max-width:767px) {
        .recruit {
                padding: 80px 0;
                background-image: url("../images/home/recruit_bg_sp.jpg");
                width: 100%;
                background-position: right center;
        }

        .recruit .title {
                font-size: 4vw;
                width: 40vw;
                margin: 0 auto 1em;
                letter-spacing: 0.1em;
        }

        .recruit .catchcopy {
                font-size: 7vw;
                letter-spacing: 0.2em;
                margin-bottom: 1.5em;
                text-align: center;
                text-shadow: 1px 1px 1px #333333;
        }

        .recruit .wrap_btn {
                width: 80%;
                margin: 0 auto;
        }
        .recruit .wrap_btn li {
                width: 100%;
                line-height: 80px;
                font-size: 2rem;
                font-weight: bold;
                text-align: center;
        }

        .recruit .wrap_btn li:first-child {
                margin-bottom: 1em;
        }
        .recruit .wrap_btn a {
                padding-left: 0;
                position: relative;
        }

        .recruit .wrap_btn a:before {
                line-height: 80px;
        }
}