<style>
/* ■ クラス名「joint-banner」の中にある「行」や「列」をすべて捕まえる設定 */

/* 1. 外枠の余白を強制削除 */
.joint-banner, 
.joint-banner .zp-section-content,
.joint-banner .zp-container {
    padding: 0 !important;
    margin: 0 !important;
    max-width: 100% !important;
}

/* 2. 【重要】画像を包んでいる「行（Row）」を強制的に横並びにする */
/* Zohoの構造のどこにクラスが当たっても効くように、複数の書き方で指定します */
.joint-banner .zp-row, 
.joint-banner .row, 
.joint-banner > div, 
.joint-banner > div > div {
    display: flex !important;           /* 横並び命令 */
    flex-wrap: nowrap !important;       /* 折り返し禁止 */
    flex-direction: row !important;     /* 確実に左→右の向きにする */
    justify-content: center !important; /* 中央寄せ */
    align-items: flex-end !important;   /* 画像の下端を揃える（ズレ防止） */
    gap: 0 !important;                  /* 隙間ゼロ */
}

/* 3. 画像が入っている「列（Column）」を強制的に50%幅にする */
.joint-banner .zp-col, 
.joint-banner [class*="col-"] {
    width: 50% !important;       /* 幅は半分 */
    flex: 0 0 50% !important;    /* 伸縮しない */
    max-width: 50% !important;   /* 最大も半分 */
    padding: 0 !important;       /* 余白なし */
    margin: 0 !important;        /* 余白なし */
    border: none !important;     /* 枠線なし */
}

/* 4. 画像自体の設定 */
.joint-banner img {
    width: 100% !important;      /* 列の幅いっぱいに */
    height: auto !important;     /* 高さはなりゆき */
    display: block !important;   /* 画像下の隙間を消す */
    margin: 0 !important;
}
</style>