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

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

シナリオモジュールの初期表示

シナリオを中央に寄せる方法

以下のCSSを該当ステップのカスタムCSSに追加することで、参考画像のようにシナリオを中央寄せすることができます。

/* テキスト中央に寄せる */
#rs_sa .c-selectText {
  margin-left: auto;
  margin-right: auto;
}

/* 左側のアイコンを中央に寄せる */
#rs_sa .c-selectLIcon {
  margin-left: auto;
}
#rs_sa .c-selectLIcon + .c-selectText {
  margin-left: 0;
}

/* 左側のアイコンとテキストの位置を調整する */
#rs_sa .c-selectRIcon {
  margin-left:0;
}

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

シナリオを中央に寄せた場合の表示

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

#rs_sa .c-selectText

初期状態ではシナリオの表示は左寄せになっています。
これをmarginを左右に自動で付与することで中央寄せに変えています。

#rs_sa .c-selectLIcon, #rs_sa .c-selectLIcon + .c-selectText

問い合わせノードのように左側にアイコンが設置されている場合、上記のCSSだけではアイコンが左端にいたままの状態になってしまいます。
これを同じくmarginの調整によって左側のアイコンも合わせて中央寄せに変えています。
後述のテキストノードのように右側にアイコンが設置されているノードと並べた場合、右アイコンの分だけ位置がずれてしまうため、気になる場合は#rs_sa .c-selectLIcon + .c-selectTextに対して「padding-right: 24px;」を追加してください。

#rs_sa .c-selectRIcon

テキストノードのように右側にアイコンが設置されている場合、上記のCSSだけではテキストがやや左側に寄ってしまいます。
これは右側のアイコンにもmarginが付与されていることが原因のため、右側のアイコンのmarginを減らして位置を調整しています。