html {
    color: #4e4e4e;
    scroll-behavior: smooth;
    font-family: Noto Sans JP, serif;
    font-size: 10px;
}

.l-top__main {
    position: relative;
}

.l-top__section {
    width: 100%;
    position: relative;
}

.l-top__section--bg-white {
    background-color: #f0ecea;
    overflow: hidden;
}

.l-top__section--bg-white:before {
    content: "";
    pointer-events: none;
    background: url("../img/common/bg_pattern_white.svg") 0 0 / 100%;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 15px;
}

@media screen and (width <=767px) {
    .l-top__section--bg-white:before {
        background: url("../img/common/bg_pattern_white_sp.svg") 0 0 / cover no-repeat;
        left: 0;
    }

    .l-top__section--bg-white.flip:before {
        background: url("../img/common/bg_pattern_white_flip.svg") 0 0 / cover no-repeat;
    }

    .l-top__section--bg-white.nosp:before {
        display: none;
    }
}

.l-top__section--bg-black {
    background: #4e4e4e url("../img/common/bg_pattern_black.png") center / cover;
}

.l-top__section-content {
    box-sizing: border-box;
    max-width: calc(1200px + 16%);
    margin: 0 auto;
    padding: 0 8%;
}

@media screen and (width <=767px) {
    .l-top__section-content {
        max-width: 100%;
        padding: 0 5%;
    }
}

/*# sourceMappingURL=layout.css.map */