スマートフォン、タブレット、PCなどの画面サイズによって見た目（当てるCSS）を変えたいというケースは一般的です。
このアンサーでは、画面サイズ毎にポップアップ内のアンサーの文字サイズを変える方法を例に、デバイス毎に当てるCSSを変える方法（いわゆるレスポンシブデザイン）を記載します。

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

PC時は文字サイズを大きく

タブレット以下では文字サイズをやや小さく

画面サイズに応じて異なるCSSを当てる方法

以下のCSSを利用することで、サポートアクション内のアンサーの文字サイズを「SP時は14px」「タブレット時は16px」「PC時は18px」と変えることが可能です。
今回のケースでは、スマホユーザーが最も多いという前提で記載しています。

#rs_sa .c-faqContent p {
  font-size: 14px;
}
@media screen and (min-width:429px) and (max-width:960px) {
  #rs_sa .c-faqContent p {
    font-size: 16px;
  }
}
@media screen and (min-width:961px) {
  #rs_sa .c-faqContent p {
    font-size: 18px;
  }
}

以下でこのCSSについて、解説していきます。
「429px」や「960px」などの数値（ブレイクポイント）の意味については後ほど解説しますので、まずは全体感を記載します。

#rs_sa .c-faqContent p

一番最初に記載しているこのCSSは特に工夫をしていないため、全ての画面サイズで反映されます。
レスポンシブデザインを実装する際は、最もユーザー層の多い画面サイズを基本に調整をかけていくため、スマホでの表示時に反映したいCSSを最初に記載しています。

@media screen and (min-width:441px) and (max-width:960px) {

これは「タブレットで表示した際にのみ、中に入っているCSSを反映させる」という指定になります。
そのため、この中で「文字サイズを16pxにする」CSSを記載した場合、タブレットでのみこのCSSが有効になり、タブレットで表示した際のアンサーの文字サイズが16pxに上書きされます。

この「@media screen and ...」という記法は「メディアクエリ」と呼び、レスポンシブデザインを実装する際に欠かせないものになります。

@media screen and (min-width:961px)

これは「PCで表示した際にのみ、中に入っているCSSを反映させる」という指定になります。
タブレットのサイズを1024pxと指定しているため、それより大きい=PCの場合、中のCSSを反映させるという動きになります。

今回は文字サイズを例に取りましたが、メディアクエリと掛け合わせることで「画面サイズ毎に余白の広さを変える」「PC時のみフローティングボタンを隠す」なども可能になります。
是非、配信したい施策に合わせて色々な組み合わせをお試しください。

また、CSSは上から順に処理されるため、同じセレクタの場合後から記載したものに上書きされます（後勝ち）。
そのため、レスポンシブデザインを実装する際は、ユーザー数の多い画面サイズをまず先に記載し、そこから画面サイズを小さくor大きくした際のCSSを指定するようご注意ください。

メディアクエリの使い方

レスポンシブデザインは「@media screen and (min-width:429px) and (max-width:960px)」のようなメディアクエリによって管理します。
一般的な利用方法の場合、以下の３つの書き方を押さえておけば問題なく利用が可能です。

特定の画面サイズ「以下」に対しての指定

以下のような書き方をします。

@media screen and (max-width:440px) {
  /* ここに任意のCSSを記載する */
}

指定された画面サイズを「最大値として」それ以下の画面サイズに対してCSSを当てることができます。

特定の画面サイズ「以上」に対しての指定

以下のような書き方をします。

@media screen and (min-width:961px) {
  /* ここに任意のCSSを記載する */
}

指定された画面サイズを「最小値として」それ以下の画面サイズに対してCSSを当てることができます。

 

特定の画面サイズ「の範囲」に対しての指定

以下のような書き方をします。

@media screen and (min-width:441px) and (max-width:960px) {
  /* ここに任意のCSSを記載する */
}

指定された画面サイズを「含む範囲として」対象の画面サイズに対してCSSを当てることができます。
minとmaxで指定された間の画面サイズの場合にのみCSSが当たります。

これらのメディアクエリは全て「以上」「以下」での指定になるため、指定された数値を含みます。
そのため特定のブレイクポイントで以上と以下を分岐させる場合、同じ値（上記のケースだと960px）を両方に指定してしまうと、後で指定したCSSが当たってしまいます。
例えば960pxまでをタブレットとし、それより大きい（960pxより大きい）値をPCとしたい場合、PC側のメディアクエリは「min-width:961px」とする必要がある点に注意してください。

ブレイクポイントの設定について

ここまで説明を簡略化するためSP・タブレット・PCと表現してきましたが、実際は画面サイズに応じて当てるCSSを変えているのであり、デバイス（iPhoneなのかiPadなのか等）で判定をしているのではありません。
ある一定の範囲の画面サイズを「SP用」「タブレット用」などと区切っており、この区切りを「ブレイクポイント」と呼びます。

毎年iPhoneの最新バージョンが発表されるように、近年多くのデバイスが発売されており、デバイスにより画面サイズは異なるためこのブレイクポイントの適切な設定もユーザー層やサイトの用途によっても変わってきます。
そのため、ここでは基本的に押さえておきたいブレイクポイントの設定について、補足します。

スマホで設定するべきブレイクポイント

こだわりがなければ「0px~440px」を指定するのが良いでしょう。
2024年9月時点でスマホの画面サイズの国内シェアを見ると、最小で320px最大で440pxとなるためです。
現在スマホより小さいデバイスでサイトを閲覧することは一般的ではないため、メディアクエリを利用する場合は以下のように「440px以下」と指定するのが適切です。

@media screen and (max-width:961px) {
  /* ここに任意のCSSを記載する */
}

ただし、iPhoneSEに代表されるような320pxの狭い画面サイズに合わせてCSSを当てると、iPhone 16 Pro Maxのように440pxと広い画面サイズの場合に見た目が崩れることがあります。
細かく調整をかける場合はスマホをさらにブレイクポイントで分け、「320px以下」「それより大きいサイズ」とする方法も検討する必要があります。

タブレットで設定するべきブレイクポイント

こだわりがなければ「441px~960px」を指定するのが良いでしょう。
最小値についてはスマホより大きいサイズとし、最大値については縦向きの際に違和感のない大きさを置いています。
ただし、iPad Proの画面サイズは1024pxあるため、最大値を1024pxとする選択肢もあります。不自然でない見た目になるよう、適宜ブレイクポイントを調整してください。
その場合、メディアクエリは以下のようになります。

@media screen and (min-width:441px) and (max-width:1024px) {
  /* ここに任意のCSSを記載する */
}

PCで設定するべきブレイクポイント

こだわりがなければ「961px~」を指定するのが良いでしょう。
PCについては基本的に「タブレットより大きい」サイズを指定するのが良いためです。
ただし、近年はPCでも画面サイズに大きな差異があるため、「961px~1279px」を小さめのPC、「1280px~1440px」を通常サイズのPC、「1441px~」を大きめのPCとしてメディアクエリを分けることも可能です。

他にも使えるメディアクエリ

ここでは、画面サイズ以外にも利用できるメディアクエリの指定例を補足的に記載します。
他にも使い方がありますので、用途に合わせて調べてみてください。

ブラウザがChromeの場合にのみCSSを当てる

@media screen and (-webkit-min-device-pixel-ratio:0) {
  /* ここに任意のCSSを記載する */
}

ブラウザがEdgeの場合にのみCSSを当てる

@supports (-ms-ime-align:auto) {
  /* ここに任意のCSSを記載する */
}