body:before {
    display: block;
    content: '';
    width: 100%;
    background: linear-gradient(to top, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.4) 100%), url(../img/bg.jpg);
    /* background-color: rgb(157 80 80 / 70%); */
    height: 100vh;
    background-size: cover;
    position: fixed;
    z-index: -1;
    /* margin-left: 17%; */
}

.ico01 {
    background: #ffb9cccf;
}

.ico02 {
    background: #b4cdffcf;
}

.ico03 {
    background: #ebffb7cf;
}

.footer-wrap {
    background: rgb(0, 0, 0, 0.8);
}

@media screen and (max-width : 800px) {
    body:before {
        width: 100%;
        margin-left: 0;
        background-position: center;
    }

    header {
        background-image: linear-gradient(90deg, rgba(0, 0, 0, .8), rgba(0, 0, 0, .8));
    }

    .navi-contact a,
    .navi-contact,
    .navi-contact a i {
        color: #fff;
    }

    .logo-area a {
        width: 167%;
    }
}

.visual-logo {
    display: none;
}

.mainvisual-under-bg {
    height: 40vh;
}

.mainvisual-under-bg:before {
    height: 40vh;
    background-position: center top 80px;
}

.underlayer .contents-ttl h2 {
    margin-top: 2rem;
}

@media (min-width : 801px) {
    .mainvisual-under-bg:before {
        background-position: center top;
    }

    .underlayer .contents-ttl h2 {
        margin-top: 0;
    }

    .mainvisual-under-bg:before {
        content: "";
        display: block;
        background: url(../img/mainvisual_2.jpg);
        background-size: cover;
    }

    .mainvisual-under-logo {
        display: flex;
    }
}