お問合せ部分の寸法をおおよそ合わせる

Author: Fukusan64

_includes/top/sections/contact.html

@@ -1,8 +1,8 @@
 <section id="contact">
   <div class="d-flex flex-column align-items-center text-center">
-    <h2 class="header-letter-spacing">お問い合わせ</h2>
-    <p class="fs-4 fw-bold lh-base mb-4">CONTACT</p>
-    <p class="fs-6 fw-semibold letter-spacing lh-lg mb-5">DojoCon Japan {{ site.year }} についてのお問い合わせは<br>以下のリンク先（Googleフォーム）よりお願いいたします。</p>
+    <h2 class="title">お問い合わせ</h2>
+    <p class="subtitle">CONTACT</p>
+    <p class="text">DojoCon Japan {{ site.year }}についてのお問い合わせは<br>以下のリンク先（Googleフォーム）よりお願いいたします。</p>
 
     <a href="{{ site.contact }}" class="btn-lg" target="_blank" rel="noopener">お問い合わせフォーム</a>
   </div>

_sass/pages/index.scss

@@ -1,18 +1,32 @@
 #contact {
-  .header-letter-spacing {
-    letter-spacing: 0.2em;
+  .title {
+    font-size: 36px;
+    letter-spacing: 0.125rem;
+    margin-bottom: 4px;
   }
-  .letter-spacing {
-    letter-spacing: 0.17em;
+  .subtitle {
+    font-size: 24px;
+    letter-spacing: 0.065rem;
+    margin-bottom: 18px;
+    font-weight: bold;
+  }
+
+  .text {
+    font-size: 18px;
+    letter-spacing: 0.0625rem;
+    font-weight: bold;
+    line-height: 2rem;
   }
 
   .btn-lg {
+    margin: 20px 0;
     display: block;
     box-sizing: border-box;
-    width: 50%;
+    width: 70%;
     min-width: fit-content;
-    padding: 0.8rem 1.5rem;
-    font-size: 1.5rem;
+    padding: 16px 0;
+    font-size: 24px;
+    letter-spacing: 0.0625rem;
     font-weight: bold;
     color: #0e0e0e;
     background-color: #efefef;