サポートアクションのポップアップをスマホ/タブレットで表示する場合、ポップアップは画面下部に固定表示されます。
このアンサーでは、スマホ表示時にポップアップを画面中央に表示する方法を記載します。
※背景は表示設定の「背景の操作を禁止」をONにすることでグレーアウトできるため、背景色の指定については記載を省きます

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

スマホでのポップアップの初期表示

ポップアップをスマートフォンで表示した際に画面中央に寄せる方法

以下のCSSを該当ステップのカスタムCSSに追加することで、画面中央に寄せることができます。

/* SP時、アンサーポップアップを中央表示する */
.-sm .c-popup.-show {
  top: 50%;
  right: 20px;/* 画面右端からの位置。任意の値を指定 */
  bottom: auto;
  left: 20px;/* 画面左端からの位置。任意の値を指定 */
  width: calc(100% - 20px - 20px);/* ポップアップの横幅。「100% - 右端からの位置 - 左端からの位置」で指定 */
  max-height: calc(100vh - 100px - 100px);/* ポップアップの縦幅の最大値。「100vh - 上端からの位置 - 下端からの位置」で指定 */
  margin: 0 auto;
  transform: translateY(-50%);
}
.-sm .c-popup .c-popupMain {
  border-radius: 14px;/* ポップアップの角の丸み。任意の値を指定 */
}

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

CSS適用後のスマホ表示ポップアップ

以下で上記のCSSについて解説します。
前提として、ポップアップは親のdiv要素に対してPC時は「-lg」クラスが、SP/タブレット時は「-sm」クラスが付与されるため、このクラスを利用することで、メディアクエリを使わずSPのみのデザインを変えることができます。

.-sm .c-popup.-show

ポップアップを中央寄せしています。
ポップアップは初期状態では下に表示されるため、ポップアップの大きさと位置を調整しています。
left, rightやheight, widthに入れている値を変更することで、ポップアップを任意の大きさ・位置に変更することができます。

.-sm .c-popup .c-popupMain

SP時にポップアップの角に丸みをつけています。
任意の値を指定することで丸みを変えることができます。