サポートアクションではポップアップや埋め込みコンテンツにボタンを設置することが可能ですが、ボタンは初期表示では縦に並びます。
このアンサーでは、カスタムCSSを用いてボタンを横に並べる方法を記載します。

以下に記載するCSSを詳細設定＞このステップのカスタムCSSに入れることで、そのサポートアクションでだけ見た目を調整することができます。
このCSSは影響範囲が広いため、ブランド設定への登録の際はご注意ください。
※カスタムCSSの設定方法はこちらをご確認ください

ボタンモジュールの初期表示

ボタンを横に並べる方法

以下のCSSを該当ステップのカスタムCSSに追加することで、参考画像のようにボタンを横に並べることができます。

/* 横に並べるためにポップアップ内の表示方向に関するCSSを調整 */
#rs_sa .c-popupBodyInner {
  flex-direction: row;
  flex-wrap: wrap;
}
#rs_sa .c-popupBodyInner > div {
  width: 100%;
}

/* 次にボタンモジュールがあるボタンモジュールのwidthを半分にする */
#rs_sa .c-popupBodyInner div:has(div .c-buttonModule):has(+ div .c-buttonModule) {
  width: 50%;
}
/* 前にボタンモジュールがあるボタンモジュールのwidthを半分にする */
#rs_sa .c-popupBodyInner div:has(div .c-buttonModule) + div:has(div .c-buttonModule) {
  width: 50%;
}

このCSSを付与すると、以下のような見た目になります。

画像付きボタンをバナーのようにした場合の表示

以下で上記のCSSについて解説します。

#rs_sa .c-popupBodyInner, #rs_sa .c-popupBodyInner > div

初期状態ではポップアップの表示はdisplay: flexとflex-direction: columnにより、すべてのモジュールが強制的に縦方向に並ぶようになっています。
これを#rs_sa .c-popupBodyInnerに当てているCSSにより、横方向に変えています。
しかしそれだけではボタンを含めた全てのモジュールが横に並んでしまうため、それぞれのモジュールに「横幅いっぱいに広がる」CSSを追加することで見た目を初期状態に合わせています。

#rs_sa .c-popupBodyInner div:has(div .c-buttonModule):has(+ div .c-buttonModule), #rs_sa .c-popupBodyInner div:has(div .c-buttonModule) + div:has(div .c-buttonModule)

コメントで書いている通り、この２つのCSSでボタンモジュールの横幅を半分にすることで、横に並べています。
例えば片方を30%、もう片方を70%とすると3:7の比率で表示ができます。
また、これは「前か後ろにボタンモジュールが存在しているボタンモジュール」にのみ影響するため、ボタンモジュールが１つしか設置されいないケースではボタンは横幅いっぱいに表示されます。