@charset "UTF-8";
/* CSS Document */
//ブレイクポイントを指定------ここから
$xl: 1399px;
$lg: 1199px;
$md: 991px;
$sm: 767px;
$xs: 575px;

@mixin xl {
  @media screen and (max-width: ($xl)) {
    @content;
  }
}
@mixin lg {
  @media screen and (max-width: ($lg)) {
    @content;
  }
}
@mixin md {
  @media screen and (max-width: ($md)) {
    @content;
  }
}
@mixin sm {
  @media screen and (max-width: ($sm)) {
    @content;
  }
}
@mixin xs {
  @media screen and (max-width: ($xs)) {
    @content;
  }
}
//ブレイクポイントを指定------ここまで

//カラー
$green: #22923b;
$yellow: #fff100;



///*---------- TOP ----------*/
#topslide {
    margin-bottom: 8rem;
    position: relative;
//    margin-top: 65px;
    @include lg {
        margin-bottom: 6rem;
    }
    @include md {
        margin-bottom: 4rem;
    }
    @include sm {
//        margin-top: 58px;
        margin-bottom: 5rem;
    }
    @include xs {
        margin-bottom: 3rem;
    }
    .topslide-box {
        position: relative;
        .catchcopy {
            position: absolute;
            font-size: 60px;
            font-size: 6rem;
            font-weight: 800;
            z-index: 50;
            color: #fff;
            text-shadow: 0px 0px 12px rgba(21, 152, 49, 1);
            -webkit-filter: drop-shadow(0px 0px 2px $green);
            filter: drop-shadow(0px 0px 2px $green);
            text-align: center;
            right: 0;
            left: 0;
            top: 50%;
            bottom: 50%;
            @include lg {
                font-size: 50px;
                font-size: 5rem;
                line-height: 1rem;
            }
            @include md {
                font-size: 40px;
                font-size: 4rem;
                line-height: 0.6rem;
            }
            @include sm {
            }
            @include xs {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                font-size: 27px;
                font-size: 2.7rem;
                line-height: 4rem;
            }
            span {
                display: block;
                font-size: 25px;
                font-size: 2.5rem;
                margin-top: 4rem;
                @include lg {
                    font-size: 20px;
                    font-size: 2rem;
                }
                @include md {
                    font-size: 18px;
                    font-size: 1.8rem;
                }
                @include sm {
                    line-height: 3rem;
                    margin-top: 2.5rem;
                }
                @include xs {
                    font-size: 18px;
                    font-size: 1.8rem;
                    margin-top: 0rem;
                    line-height: 2.5rem;
                }
            }
        }
        .swiper-box1 {
            position: relative;
            display: flex;
            align-items: center;
            .deco1 {
                position: absolute;
                width: 490px;
                @include md {
                    width: 390px;
                }
                @include xs {
                    width: 300px;
                }
            }

        }
        .swiper-img {
            width: 90%;
            height: 815px;
            background-position: center;
            @include lg {
                height: 600px;
            }
            @include md {
                height: 450px;
            }
            @include sm {
                width: 100%;
            }
            @include xs {
                height: 305px;
            }
        }
        .img1 {
            background-image: url("../img/top-img01.jpg");
            background-size: cover;
    //		@include sm {
    //			background-image: url("../img/top-slide-1-s.jpg");
    //		}
        }
        .img2 {
            background-image: url("../img/top-slide-02.jpg");
            background-size: cover;
    //		@include sm {
    //			background-image: url("../img/top-slide-2-s.jpg");
    //		}
        }
        .img3 {
            background-image: url("../img/top-slide-03.jpg");
            background-size: cover;
    //		@include sm {
    //			background-image: url("../img/top-slide-3-s.jpg");
    //		}
        }
    }
    .top-bg {
        position: absolute;
        background-color: #efefef;
        height: 1200px;
        width: 92%;
        top: 0;
        right: 0;
        @include lg {
            height: 930px;
        }
        @include md {
            height: 715px;
        }
        @include sm {
            height: 800px;
        }
        @include xs {
            height: 650px;
        }
    }
}

///*---------- policy ----------*/
#policy {
    margin-bottom: 9rem;
    @include lg {
        margin-bottom: 6rem;
    }
    @include md {
        margin-bottom: 9rem;
    }
    @include sm {
        margin-bottom: 3rem;
    }
    .policy-img {
        text-align: right;
        @include sm {
            padding-right: 5rem;
        }
        @include xs {
            margin-top: 1rem;
        }
        img {
            @include sm {
                width: 45%;
            }
        }
    }
    .policy-text {
        color: $green;
        @include sm {
            display: flex;
            justify-content: flex-end;
        }
        dl {
            @include sm {
                width: 90%;
                margin-bottom: 0;
            }
            dt {
                font-size: 45px;
                font-size: 4.5rem;
                font-weight: 800;
                line-height: 6.5rem;
                letter-spacing: 0.3rem;
                margin-bottom: 2rem;
                @include lg {
                    font-size: 35px;
                    font-size: 3.5rem;
                    line-height: 5rem;
                }
                @include md {
                    font-size: 32px;
                    font-size: 3.2rem;
                }
                @include sm {
                }
                @include xs {
                    font-size: 23px;
                    font-size: 2.3rem;
                    line-height: 3.2rem;
                    margin-bottom: 1rem;
                    text-align: right;
                }
            }
            dd {
                line-height: 3.2rem;
                @include xs {
                    line-height: 3rem;
                }
            }
        }
    }
}

///*---------- company ----------*/
#company {
    margin-bottom: 12rem;
    position: relative;
    @include md {
        margin-bottom: 10rem;
    }
    @include xs {
        margin-bottom: 7rem;
    }
    .company-text {
        text-align: center;
        img {
            width: 578px;
            @include lg {
                width: 530px;
            }
            @include md {
                width: 400px;
            }
            @include sm {
                width: 340px;
            }
            @include xs {
                width: 300px;
            }
        }
        p {
            color: $green;
            margin-top: 7rem;
            font-weight: 600;
            line-height: 3.5rem;
            margin-bottom: 7.5rem;
            @include lg {
                margin-top: 5rem;
                margin-bottom: 5.5rem;
            }
            @include sm {
                margin-top: 3rem;
                margin-bottom: 3.5rem;
            }
            @include xs {
                line-height: 2.8rem;
                text-align: left;
                margin-left: 1rem;
            }
        }
    }
    .company-box01,.company-box02,.company-box03 {
        display: flex;
        height: 325px;
        position: relative;
        width: 100%;
        margin-bottom: 1rem;
        @include lg {
            height: 265px;
        }
        @include md {
            height: 205px;
        }
        @include sm {
            height: 165px;
        }
        @include xs {
            height: 120px;
        }
        a {
            display: flex;
            .company-box-img {
                display: inline-block;
                overflow: hidden;
                @include xs {
                }
                img {
                    height: 100%;
                    width: 100%;
                    object-fit: cover;
                }
            }
            .company-button {
                position: relative;
                background-color: $green;
                display: inline-block;
                height: 100%;
                width: 30vw;
//                width: 30%;
                padding-left: 5rem;
                display: flex;
                align-items: flex-start;
                flex-direction: column;
                justify-content: center;
                @include md {
                    padding-left: 3.5rem;
                }
                @include sm {
                    padding-left: 2.5rem;
                }
                @include xs {
                    width: 40%;
                    padding-left: 2rem;
                }
                h4 {
                    font-size: 30px;
                    font-size: 3rem;
                    font-weight: 600;
                    color: #fff;
                    position: relative;
                    letter-spacing: 0.3rem;
                    @include lg {
                        font-size: 25px;
                        font-size: 2.5rem;
                    }
                    @include sm {
                        font-size: 2px;
                        font-size: 2rem;
                    }
                    @include xs {
                        letter-spacing: 0.1rem;
                    }
                    span {
                        font-size: 20px;
                        font-size: 2rem;
                        font-weight: 300;
                        display: block;
                        margin-top: 1rem;
                        @include lg {
                            font-size: 16px;
                            font-size: 1.6rem;
                        }
                        @include xs {
                            margin-top: 0.5rem;
                        }
                    }
                }
                img {
                    position: absolute;
                    height:  120px;
                    right: 3rem;
                    bottom: 3rem;
                    @include lg {
                        height: 95px;
                    }
                    @include md {
                        height: 78px;
                        right: 2.3rem;
                        bottom: 2.3rem;
                    }
                    @include sm {
                        height: 60px;
                    }
                    @include xs {
                        right: 1rem;
                        bottom: 1rem;
                    }
                }
                &::before {
                    position: absolute;
                    top: 0;
                    left: 0;
                    content: "";
                    display: block;
                    width: 100%;
                    height: 100%;
                    background: #1a1a1a;
                    transform: scaleX(0);
                    transform-origin: right;
                    transition: all 0.5s ease;
                    transition-property: transform;
                }
            }
            &:hover {
                .company-button { 
                   &::before {
                      transform: scaleX(1);
                      transform-origin: left;
                    }
                }
            }
        }
    }
    .company-box01 {
        .company-box-img {
            width: 50vw;
            @include xs {
                width: 60%;
            }
        }
    }
    .company-box02 {
//        width: 85%;
        .company-box-img {
            width: 60vw;
            @include xs {
                width: 60%;
            }
        }
        a {
            .company-button {
                background-color: #1f4741;
                img {
                    height: 82px;
                    @include lg {
                        height: 70px;
                    }
                    @include md {
                        height: 52px;
                    }
                    @include sm {
                        height: 35px;
                    }
                    @include xs {
                        height: 32px;
                    }
                }
            }
        }
    }
    .company-box03 {
//        width: 90%;
        .company-box-img {
            width: 70vw;
            @include xs {
                width: 60%;
            }
        }
        a {
            .company-button {
                img {
                    height: 81px;
                    @include lg {
                        height: 69px;
                    }
                    @include md {
                        height: 55px;
                    }
                    @include sm {
                        height: 40px;
                    }
                }
            }
        }
    }
    .company-bg {
        position: absolute;
        background-color: #efefef;
        background-image: linear-gradient(180deg, #efefef 45%, #FFFFFF 87%);
        background-position: bottom;
        height: 30vh;
        width: 92%;
        top: 4rem;
        left: 0;
        z-index: -1;
        @include md {
            top: 3rem;
        }
    }
}

///*---------- service ----------*/
#service {
    margin-bottom: 12rem;
    background-image: url("../img/top-service-bg.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    padding-bottom: 11rem;
    @include md {
        margin-bottom: 7rem;
    }
    @include sm {
        padding-bottom: 7rem;
    }
    @include xs {
        padding-bottom: 4rem;
    }
    .service-box {
        display: flex;
        align-items: center;
        @include sm {
            flex-direction: column;
        }
        .service-text {
            width: 50%;
            padding-left: 10rem;
            padding-right: 6rem;
            margin-top: 4rem;
            @include lg {
                padding-left: 8rem;
            }
            @include md {
                padding-right: 4rem;
            }
            @include sm {
                width: 85%;
                padding: 0;
            }
            @include xs {
                margin-top: 3rem;
            }
            dl {
                dt {
                    font-size: 40px;
                    font-size: 4rem;
                    color: $green;
                    margin-bottom: 2rem;
                    @include lg {
                        font-size: 30px;
                        font-size: 3rem;
                    }
                    @include md {
                        font-size: 26px;
                        font-size: 2.6rem;
                    }
                    @include xs {
                        margin-bottom: 1rem;
                    }
                }
                dd {
                    margin-bottom: 5rem;
                    line-height: 3.3rem;
                    @include md {
                        line-height: 2.5rem;
                    }
                    @include xs {
                        margin-bottom: 3rem;
                    }
                }
            }
        }
        .service-img {
            width: 50%;
            @include sm {
                width: 90%;
            }
            @include xs {
                width: 100%;
            }
            img {
                height: 100%;
                width: 100%;
            }
        }
    }
}
///*---------- recruit ----------*/
#recruit {
    position: relative;
    margin-bottom: 12rem;
    @include md {
        margin-bottom: 8rem;
    }
    @include xs {
        margin-bottom: 12rem;
    }
    .recruit-box {
        display: flex;
        align-items: center;
        @include sm {
            flex-direction: column;
        }
        .recruit-text {
            width: 50%;
            padding-left: 10rem;
            padding-right: 6rem;
            margin-top: 4rem;
            @include lg {
                padding-left: 8rem;
                margin-top: 2rem;
            }
            @include md {
                padding-right: 4rem;
            }
            @include sm {
                width: 80%;
                padding-right: 0;
                padding-left: 0;
                padding-bottom: 10rem;
                margin-top: 3rem;
            }
            @include xs {
                padding-bottom: 0rem;
                margin-top: 2rem;
                width: 80%;
            }
            dl {
                z-index: 6;
                position: sticky;
                color: #fff;
                dt {
                    font-size: 40px;
                    font-size: 4rem;
                    margin-bottom: 2rem;
                    @include lg {
                        font-size: 30px;
                        font-size: 3rem;
                    }
                    @include md {
                        font-size: 26px;
                        font-size: 2.6rem;
                    }
                    @include xs {
                        margin-bottom: 1rem;
                    }
                    span {
                        color: $yellow;
                    }
                }
                dd {
                    margin-bottom: 5rem;
                    line-height: 3.3rem;
                    @include lg {
                        margin-bottom: 4rem;
                    }
                    @include md {
                        line-height: 2.5rem;
                    }
                    @include xs {
                        margin-bottom: 2rem;
                    }
                }
            }
        }
        .recruit-img {
//            position: sticky;
            width: 52%;
//            top: 0;
            z-index: 5;
            @include sm {
//                position: revert;
                width: 100%;
                text-align:right;
            }
            img {
                width: 100%;
                height: 100%;
                filter: drop-shadow(4px 6px 8px rgba(0,0,0,0.3));
                @include sm {
                    width: 90%;
                }
            }
        }
    }
    .recruit-bg {
        position: absolute;
        width: 52%;
        top:0;
        z-index: 1;
        @include sm {
            width: 95%;
            top: revert;
            bottom: 0;
        }
        @include xs {
            width: 120%;
            bottom: -6rem;
        }
        img {
            width: 100%;
            height: 100%;
            
        }
    }
//    .recruit-bg {
//        position: absolute;
//        background-image: url("../img/top-recruit-bg.svg");
//        background-repeat: no-repeat;
//        width: 100vw;
//        background-size: contain;
//        height: 584px;
//    }
}