@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;


//下層ページ
#ul-header {
    .header-bg {
        background-image: url("../img/header-service.jpg");
    }
}



///*---------- intro ----------*/
#intro {
    margin-bottom: 11rem;
    @include sm {
        margin-bottom: 14rem;
    }
    @include xs {
        margin-bottom: 5rem;
    }
    .intro-box {
        img {
            margin-top: -5rem;
            @include md {
                margin-top: 0;
            }
            @include xs {
                margin-top: 3rem;
            }
        }
        .intro-text {
            position: relative;
            padding-left: 4rem;
            line-height: 3.3rem;
            @include md {
                line-height: 2.8rem;
            }
            @include sm {
                padding-left: 1rem;
            }
            .intro-img {
                position: absolute;
                width: 110%;
//                right: 0;
                left: 0;
                bottom: 5rem;
                z-index: -1;
                @include xl {
                    width: 100%;
                }
                @include lg {
                    bottom: 4rem;
                }
                @include md {
                    bottom: 0rem;
                }
                @include sm {
                    bottom: -7rem;
                }
                img {
                    width: 100%;
                    height: 100%;
                }
            }
        }
    }
    
}

///*---------- service ----------*/
#service {
    margin-bottom: 18rem;
    @include sm {
        margin-bottom: 12rem;
    }
    .service-box-left,.service-box-right {
        margin-bottom: 17rem;
        display: flex;
        flex-direction: row;
        align-items: center;
        @include sm {
            margin-bottom: 8rem;
            flex-direction: column;
        }
        .service-img {
            position: relative;
            width: 55%;
            @include sm {
                width: 90%;
            }
            img {
                width: 100%;
                height: 100%;
            }
        }
        .service-text {
            width: 38%;
            @include sm {
                width: 90%;
                margin-top: 3rem;
            }
            h4 {
                font-weight: 700;
                margin-bottom: 3rem;
                font-size: 23px;
                font-size: 2.3rem;
                @include sm {
                    font-size: 18px;
                    font-size: 1.8rem;
                    margin-bottom: 2rem;
                }
                span {
                    font-family: "Josefin Sans", sans-serif;
                    color: $green;
                    font-style: normal;
                    font-size: 50px;
                    font-size: 5rem;
                    letter-spacing: revert;
                    display: block;
                    @include lg {
                        font-size: 43px;
                        font-size: 4.3rem;
                    }
                    @include md {
                        font-size: 38px;
                        font-size: 3.8rem;
                    }
                    @include xs {
                        font-size: 35px;
                        font-size: 3.5rem;
                    }
                }
            }
            p {
                line-height: 3.3rem;
                @include md {
                    line-height: 2.8rem;
                }
            }
        }
    }
    .service-box-left {
        .service-text {
            margin-right: 2rem;
            margin-left: 4rem;
            @include xs {
                margin-right: 2rem;
                margin-left: 2rem;
            }
        }
        .service-img {
            &::before {
                content: "";
                background-image: url("../img/service-left.svg");
                background-repeat: no-repeat;
                height: 209px;
                width: 175%;
                display: inline-block;
                position: absolute;
                bottom: -55px;
                left: 0;
                z-index: -1;
                @include lg {
                    bottom: -110px;
                }
                @include md {
                    bottom: -140px;
                }
                @include sm {
                    bottom: -102px;
                }
                @include xs {
                    bottom: -156px;
                    content: none;
                }
            }
        }
    }
    .service-box-right {
        justify-content: flex-end; 
        .service-text {
            margin-right: 4rem;
            margin-left: 2rem;
            @include xs {
                margin-right: 2rem;
                margin-left: 2rem;
            }
        }
        .service-img {
            &::after {
                content: "";
                background-image: url("../img/service-right.svg");
                background-repeat: no-repeat;
                height: 209px;
                width: 175%;
                display: inline-block;
                position: absolute;
                bottom: -55px;
                right: 0;
                background-position: right;
                z-index: -1;
                @include lg {
                    bottom: -90px;
                }
                @include md {
                    bottom: -95px;
                }
                @include sm {
                    bottom: -73px;
                }
                @include xs {
                    bottom: -101px;
                    content: none;
                }
            }
        }
    }
}

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

///*---------- about ----------*/
///*----------  ----------*/