@import './common.css';

/*----mv----*/
#ly_topMv {
    position: relative;
}

/*----banner-----*/
#ly_banner {
    padding-top: 96px;
    padding-bottom: 94px;
}

#ly_banner .container {
    margin-right: calc((100vw - 1280px)/2 + 225px);
    margin-left: calc((100vw - 1280px)/2 + 225px);
}

@media screen and (max-width: 1279px) {
    #ly_banner .container {
        margin-right: 20%;
        margin-left: 20%;
    }
}

@media screen and (max-width: 1138px) {
    #ly_topMv {
        margin-top: 86px;
    }

    #ly_banner .container {
        margin-right: 10%;
        margin-left: 10%;
    }
}

@media screen and (max-width: 768px) {
    #ly_banner {
        padding-top: 48px;
        padding-bottom: 49px;
    }

    #ly_banner .container {
        margin-right: 12.5px;
        margin-left: 12.5px;
    }
}




/*----decoImg-----*/
.el_decoImg {
    width: 100%;
}

.el_decoImg img {
    width: 100%;
}

/*----service----*/
#ly_service {
    position: relative;
}

.bl_serviceBg {
    z-index: -1;
    background-image: url(../image/common/pattern_bg.jpg);
    background-size: cover;
    padding-top: 96px;
    padding-bottom: 56px;

}

.bl_serviceBg::before {
    position: absolute;
    z-index: 0;
    top: 0;
    right: 0;

    width: 400px;
    height: 400px;

    content: '';

    background-image: url(../image/top/service_upper_deco.png);
}

.bl_serviceBg::after {
    position: absolute;
    z-index: 0;
    top: 399px;
    left: 1px;

    width: 400px;
    height: 400px;

    content: '';

    background-image: url(../image/top/service_under_deco.png);
}

#ly_service .container {
    position: relative;
    z-index: 1;

    margin-right: calc((100vw - 1280px)/2 + 130px);
    margin-left: calc((100vw - 1280px)/2 + 130px);
}

@media screen and (max-width: 1279px) {
    #ly_service .container {
        margin-right: 10%;
        margin-left: 10%;
    }
}

@media screen and (max-width: 768px) {
    .bl_serviceBg {
        padding-top: 46px;
        padding-bottom: 121px;
    }

    .bl_serviceBg::before {
        width: 117px;
        height: 117px;

        background-size: cover;
    }

    .bl_serviceBg::after {
        top: 117px;
        bottom: unset;

        width: 117px;
        height: 117px;

        background-size: cover;
    }
}

/*----yamadayaGonomi----*/
#ly_yamadayaGonomi {
    position: relative;
}

.bl_yamadayaGonomiBg {
    position: relative;
    padding-top: 96px;
    padding-bottom: 95px;

    background-image: url(../image/top/yamadaya_gonomi_bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}

#ly_yamadayaGonomi .container {
    margin-right: calc((100vw - 1280px)/2 + 130px);
    margin-left: calc((100vw - 1280px)/2 + 130px);
}

@media screen and (max-width: 1279px) {
    #ly_yamadayaGonomi .container {
        margin-right: 10%;
        margin-left: 10%;
    }
}

@media screen and (max-width: 768px) {
    .bl_yamadayaGonomiBg {
        padding-top: 48px;
        padding-bottom: 47px;
    }
}

/*----note----*/
#ly_note {
    padding-top: 98px;
    padding-bottom: 96px;
}

#ly_note .container {
    margin-right: calc((100vw - 1280px)/2 + 225px);
    margin-left: calc((100vw - 1280px)/2 + 225px);
}

.bl_noteBannerWrapper {
    width: 100%;
}

.bl_noteBannerWrapper img {
    width: 100%;
}

@media screen and (max-width: 1279px) {
    #ly_note .container {
        margin-right: 17%;
        margin-left: 17%;
    }
}


@media screen and (max-width: 768px) {
    #ly_note {
        padding-top: 46px;
        padding-bottom: 49px;
    }

    #ly_note .container {
        margin-right: 10px;
        margin-left: 10px;
    }
}