カラムの左右ぶち抜き

<style type="text/css">
/*<![CDATA[*/
.harukix-box {
    position: relative;
    padding: 40px;
}

.harukix-main {
    position: relative;
    z-index: 1;
}
 
.harukix-sub {
    position: absolute;
}

.harukix-sub.is-lt {
    top: 0;
    left: 0;
}

.harukix-sub.is-rb {
    bottom: 0;
    right: 0;
}

.komaix {
    position: relative;
    padding-top: 40px !important;
    padding-bottom: 40px !important;
}

.komaix > .cc-m-hgrid-column:first-child {
    position: absolute;
    top: 0;
    left: 50%;
    right: 50%;
    bottom: 0;
    width: auto !important;
    padding: 0;
    margin: 0 -50vw;
}

.komaix > .cc-m-hgrid-column:not(:first-child) {
    position: relative;
    z-index: 1;
    width: 49% !important;
}

.komaix-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0 !important;
}

.komaix-bg::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    /*background-color: rgba(255, 255, 255, 0.6);*/
    background-image: linear-gradient(270deg, rgba(255, 255, 255, 0.9) 30%, rgba(255, 255, 255, 0));
}

.komaix-bg.bg-colo1::before {
    background-image: linear-gradient(270deg, rgba(0, 0, 0, 0.9) 30%, rgba(0, 0, 0, 0));
}

.komaix-bg.bg-colo2::before {
    background-image: linear-gradient(270deg, rgba(255, 255, 255, 0.9) 30%, rgba(255, 255, 255, 0));
}

.komaix-bg  > * {
    width: 100%;
    height: 100% !important;
}

.komaix-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/*]]>*/
</style>

<div class="custom-hook" data-class-name="komaix" data-target-position="next"></div>