レスポンシブ対応

src/app/faq/page.module.scss

@@ -3,8 +3,30 @@
   box-shadow: $x $y $blur $color;
 }
 
+@media (max-width: variables.$tablet-width) {
+  .head {
+    font-size: 1.5rem; // 24px
+  }
+
+  .contents {
+    padding: 20px;
+  }
+}
+
+@media (min-width: variables.$tablet-width) {
+  .head {
+    font-size: 2.5rem; // 40px
+  }
+
+  .contents {
+    padding: 40px;
+    max-width: variables.$pages-max-width;
+  }
+}
+
 .head {
-  text-decoration: underline;
+  font-weight: normal;
+  border-bottom: 1px solid black;
 }
 
 .container {
@@ -16,42 +38,6 @@
 
 .contents {
   margin: 40px auto;
-  padding: 40px;
   background-color: #ffffff;
   box-shadow: 2px 2px 4px gray;
-  max-width: variables.$pages-max-width;
-}
-
-.QAcontainer {
-  margin-top: 40px;
-  margin-bottom: 40px;
-}
-
-.chatMessageQuestion {
-  @include box-shadow(0px, 4px, 10px, rgba(0, 0, 0, 0.1));
-  width: fit-content;
-  padding: 1em; 
-  background-color: #f1f1f1;
-  border-radius: 12px;
-  .chara {
-    float: left;
-    font-size: 32px;
-    color: #439154;
-    margin: 0 40px 0 0;
-  }
-}
-
-.chatMessageAnswer {
-  @include box-shadow(0px, 4px, 10px, rgba(0, 0, 0, 0.1));
-  //display: inline-block;
-  width: fit-content;
-  padding: 1em; 
-  background-color: #f1f1f1;
-  border-radius: 12px;
-  .chara {
-    float: left;
-    font-size: 32px;
-    color: #E6007E;
-    margin: 0 40px 0 0;
-  }
-}
+}

src/app/faq/page.tsx

@@ -21,7 +21,7 @@ export default function Faq() {
         ]}
       />
       <main className={styles.contents}>
-        <h1 className={styles.head}>よくある質問</h1>
+        <span className={styles.head}>よくある質問</span>
         <QAComponent
           question='FAQに載ってないことはどこで聞けますか?'
           answer='もしほかにご質問があればX(旧Twitter)のDMなどで気軽に聞いてください！'
@@ -52,7 +52,7 @@ export default function Faq() {
         />
         <QAComponent
           question='どうやって練習をしているの？'
-          answer='AtCoderという毎週末に競技プログラミングコンテストを開催している企業があるので、主にそこの問題を解きます。まず&quot;AtCoder Beginner Contest&quot;に参加して競技プログラミングに慣れましょう。Web研では基礎を一通り講習した後で対価の過去問を使った実践演習を主に行っています！'
+          answer='AtCoderという毎週末に競技プログラミングコンテストを開催している企業があるので、主にそこの問題を解きます。まず"AtCoder Beginner Contest"に参加して競技プログラミングに慣れましょう。Web研では基礎を一通り講習した後で対価の過去問を使った実践演習を主に行っています！'
         />
         <QAComponent
           question='使う言語は？'