From 0a1e9b194ca89defafa49f0029e3cfdf2e0251c8 Mon Sep 17 00:00:00 2001
From: "k_95.21" <kohta0421kochi@gmail.com>
Date: Sun, 19 Nov 2023 16:52:57 +0900
Subject: [PATCH 1/4] add pure layout because contact page into contact layout
 is not goog

---
 src/app/contact/page.tsx                      |  5 +--
 .../templates/SubPagePureLayout.tsx           | 34 +++++++++++++++++++
 .../styles/SubPagePureLayout.module.scss      |  0
 3 files changed, 37 insertions(+), 2 deletions(-)
 create mode 100644 src/components/templates/SubPagePureLayout.tsx
 create mode 100644 src/components/templates/styles/SubPagePureLayout.module.scss

diff --git a/src/app/contact/page.tsx b/src/app/contact/page.tsx
index be395df..9166c4a 100644
--- a/src/app/contact/page.tsx
+++ b/src/app/contact/page.tsx
@@ -5,6 +5,7 @@ import React from 'react'
 import styles from './Contact.module.scss'
 import SubPageHero from '@/components/templates/SubPageHero'
 import MainLayout from '@/components/templates/MainLayout'
+import SubPagePureLayout from '@/components/templates/SubPagePureLayout'
 
 
 // components import
@@ -15,7 +16,7 @@ const Contact = () => {
     return(
         <div className={styles.about}>
             {/* TODO: pureLayoutとかのコンポーネントを作る　contactの中にcontactは変 */}
-            <MainLayout
+            <SubPagePureLayout
                 id={6}
             >
                 <SubPageHero
@@ -27,7 +28,7 @@ const Contact = () => {
                 >
                     <h1>this space is contact children space</h1>
                 </SubPageHero>
-            </MainLayout>
+            </SubPagePureLayout>
         </div>
     )
 }
diff --git a/src/components/templates/SubPagePureLayout.tsx b/src/components/templates/SubPagePureLayout.tsx
new file mode 100644
index 0000000..916b9ff
--- /dev/null
+++ b/src/components/templates/SubPagePureLayout.tsx
@@ -0,0 +1,34 @@
+import React from 'react'
+
+
+// scss import
+import styles from './styles/SubPagePureLayout.module.scss'
+
+
+// components import
+import Header from '../organisms/Header'
+import Footer from '../organisms/Footer'
+
+// type
+export type MainLayoutProps = {
+    id: number
+    children: React.ReactNode
+}
+
+
+const SubPagePureLayout = ({
+    id,
+    children
+}: MainLayoutProps) => {
+    return (
+        <div className={styles.main} key={id}>
+            <Header />
+            <div className={styles.sub}>
+                {children}
+            </div>
+            <Footer />
+        </div>
+    )
+}
+
+export default SubPagePureLayout
\ No newline at end of file
diff --git a/src/components/templates/styles/SubPagePureLayout.module.scss b/src/components/templates/styles/SubPagePureLayout.module.scss
new file mode 100644
index 0000000..e69de29

From 25e397dd682ca5bc6b37f7dddc21195a9263431b Mon Sep 17 00:00:00 2001
From: "k_95.21" <kohta0421kochi@gmail.com>
Date: Sun, 19 Nov 2023 17:23:44 +0900
Subject: [PATCH 2/4] add contact form company or personal change logic

---
 src/app/contact/Contact.module.scss           | 34 +++++++++++
 src/app/contact/page.tsx                      | 61 ++++++++++++++++---
 .../styles/SubPageContent.module.scss         |  2 +
 3 files changed, 89 insertions(+), 8 deletions(-)

diff --git a/src/app/contact/Contact.module.scss b/src/app/contact/Contact.module.scss
index e69de29..a974888 100644
--- a/src/app/contact/Contact.module.scss
+++ b/src/app/contact/Contact.module.scss
@@ -0,0 +1,34 @@
+.formBox {
+    width: 100%;
+    margin-top: 100px;
+    height: 500px;
+    border: 1px solid gray;
+    .flexButton {
+        display: flex;
+        align-items: center;
+        .personalButton {
+            background-color: rgb(255, 255, 255);
+            color: red;
+            padding: 10px 20px;
+            cursor: pointer;
+            transition: background-color 0.3s, color 0.3s;
+            &.active {
+                // active時のスタイル
+                background-color: red;
+                color: white;
+            }
+        }
+        .companyButton {
+            background-color: rgb(255, 255, 255);
+            color: red;
+            padding: 10px 20px;
+            cursor: pointer;
+            transition: background-color 0.3s, color 0.3s;
+            &.active {
+                // active時のスタイル
+                background-color: red;
+                color: white;
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/app/contact/page.tsx b/src/app/contact/page.tsx
index 9166c4a..ec6ae9d 100644
--- a/src/app/contact/page.tsx
+++ b/src/app/contact/page.tsx
@@ -1,18 +1,24 @@
-import React from 'react'
-
+'use client'
+import React, { useState } from 'react'
 
 // scss import
 import styles from './Contact.module.scss'
+
+// components import
 import SubPageHero from '@/components/templates/SubPageHero'
-import MainLayout from '@/components/templates/MainLayout'
 import SubPagePureLayout from '@/components/templates/SubPagePureLayout'
+import SubPageContent from '@/components/templates/SubPageContent'
+import SubPageSecTitle from '@/components/atoms/SubPageSecTitle'
+import SubPageTitleBox from '@/components/molecules/SubPageTitleBox'
+import SubPageMainText from '@/components/atoms/SubPageMainText'
 
 
-// components import
+const Contact = () => {
 
+    // formの切り替え
+    const [form, setForm] = useState<'personal' | 'company'>('personal');
 
 
-const Contact = () => {
     return(
         <div className={styles.about}>
             {/* TODO: pureLayoutとかのコンポーネントを作る　contactの中にcontactは変 */}
@@ -25,9 +31,48 @@ const Contact = () => {
                     title='お問い合わせ'
                     subTitle='このサービスについてお問い合わせいただけます。'
                     pageName='CONTACT'
-                >
-                    <h1>this space is contact children space</h1>
-                </SubPageHero>
+                />
+                <SubPageContent id={5}>
+                    <SubPageSecTitle id={1} text='Contact' color='red' />
+                    <SubPageTitleBox id={1} enTitle='FORM' jaTitle='お問い合わせフォーム' />
+                    <SubPageMainText
+                        id={1}
+                        text='
+                            ここではサービスについて、また、サービスを使用する上での不具合や要望などをお問い合わせいただけます。
+                            下記のフォームは法人のお客様と個人のお客様で内容が分かれていますので、お問い合わせの内容によって選択してください。
+                            また、お問い合わせの内容によっては、お返事にお時間をいただく場合がございます。あらかじめご了承ください。
+                        '
+                    />
+                    <div className={styles.formBox}>
+                        <div className={styles.flexButton}>
+                        <button
+                            className={`${styles.personalButton} ${form === 'personal' ? styles.active : ''}`}
+                            onClick={() => setForm('personal')}
+                        >
+                            個人の方
+                        </button>
+                        <button
+                            className={`${styles.companyButton} ${form === 'company' ? styles.active : ''}`}
+                            onClick={() => setForm('company')}
+                        >
+                            法人の方
+                        </button>
+                        </div>
+                        <div className={styles.formBox}>
+                        {form === 'personal' ? (
+                            <div>
+                            <h1>Person Form</h1>
+                            {/* ここに実際の個人の方向けのフォームを配置 */}
+                            </div>
+                        ) : (
+                            <div>
+                            <h1>Company Form</h1>
+                            {/* ここに実際の法人の方向けのフォームを配置 */}
+                            </div>
+                        )}
+                        </div>
+                    </div>
+                </SubPageContent>
             </SubPagePureLayout>
         </div>
     )
diff --git a/src/components/templates/styles/SubPageContent.module.scss b/src/components/templates/styles/SubPageContent.module.scss
index 043e639..49818cc 100644
--- a/src/components/templates/styles/SubPageContent.module.scss
+++ b/src/components/templates/styles/SubPageContent.module.scss
@@ -1,6 +1,8 @@
 .content {
     width: 60%;
     max-width: 1900px;
+    padding: 20px 0 100px 0;
+    box-sizing: border-box;
     margin: 0 auto;
 }
 

From cee418abf69d3f3822943f1c05687d7a04194f12 Mon Sep 17 00:00:00 2001
From: "k_95.21" <kohta0421kochi@gmail.com>
Date: Sun, 19 Nov 2023 17:45:16 +0900
Subject: [PATCH 3/4] add zod and react-hook-form contact pc layout complte

---
 src/app/contact/Contact.module.scss | 213 ++++++++++++++++++++++++++--
 src/app/contact/page.tsx            | 207 ++++++++++++++++++++++++---
 2 files changed, 392 insertions(+), 28 deletions(-)

diff --git a/src/app/contact/Contact.module.scss b/src/app/contact/Contact.module.scss
index a974888..f3e4d91 100644
--- a/src/app/contact/Contact.module.scss
+++ b/src/app/contact/Contact.module.scss
@@ -1,34 +1,227 @@
 .formBox {
     width: 100%;
-    margin-top: 100px;
-    height: 500px;
-    border: 1px solid gray;
+    margin-top: 70px;
     .flexButton {
         display: flex;
         align-items: center;
         .personalButton {
             background-color: rgb(255, 255, 255);
             color: red;
-            padding: 10px 20px;
+            padding: 20px 30px;
+            border-radius: 5px;
             cursor: pointer;
             transition: background-color 0.3s, color 0.3s;
             &.active {
                 // active時のスタイル
-                background-color: red;
-                color: white;
+                background-color: var(--main-red-color);
+                color: var(--main-white-color);
             }
         }
         .companyButton {
             background-color: rgb(255, 255, 255);
             color: red;
-            padding: 10px 20px;
+            padding: 20px 30px;
+            border-radius: 5px;
             cursor: pointer;
             transition: background-color 0.3s, color 0.3s;
             &.active {
                 // active時のスタイル
-                background-color: red;
-                color: white;
+                background-color: var(--main-red-color);
+                color: var(--main-white-color);
             }
         }
     }
-}
\ No newline at end of file
+    .formBox {
+        padding: 30px 0 40px 0;
+        box-sizing: border-box;
+        // form styling
+        .form {
+            width: 100%;
+            .label {
+            display: block;
+            margin-top: 20px;
+            .labelTitle {
+                font-size: 20px;
+                font-weight: bold;
+                color: rgb(27, 27, 27);
+            }
+            .textInput {
+                width: 100%;
+                min-width: 800px;
+                margin-top: 10px;
+                margin-bottom: 10px;
+                padding: 20px 30px;
+                border-radius: 10px;
+                border: 1px solid gray;
+            }
+            .errorMessage {
+                color: red;
+                margin-bottom: 20px;
+            }
+            // textarea
+            .textarea {
+                width: 100%;
+                min-width: 800px;
+                min-height: 200px;
+                margin-top: 10px;
+                margin-bottom: 20px;
+                padding: 20px 30px;
+                box-sizing: border-box;
+                border-radius: 10px;
+                border: 1px solid gray;
+            }
+            .checkbox {
+                width: 20px;
+                height: 20px;
+                cursor: pointer;
+                border-radius: 4px;
+                border: 1px solid gray;
+                pointer-events: auto;
+            }
+            .checkbox:checked {
+                background-color: black;
+            }
+            }
+            .checkLabel {
+            .textBox {
+                width: 100%;
+                height: 200px;
+                border-radius: 5px;
+                border: 0.2px solid gray;
+                margin: 20px 0 30px 0;
+                overflow: scroll;
+            }
+            .checkboxContainer {
+                display: flex;
+                align-items: center;
+                margin-bottom: 10px;
+                gap: 20px;
+            }
+        
+            .checkbox {
+                width: 20px;
+                height: 20px;
+                cursor: pointer;
+                border-radius: 4px;
+                border: 1px solid gray;
+                margin-right: 10px;
+            }
+        
+            .errorMessage {
+                color: red;
+                margin-bottom: 20px;
+            }
+        
+            .checkbox:checked {
+                background-color: black;
+            }
+            }
+        }
+        .button {
+            padding: 15px 50px;
+            border-radius: 20px;
+            border: 1px solid gray;
+        }
+        .button:hover {
+            background-color: black;
+            color: white;
+        }
+  
+    }
+}
+
+
+// responsive
+
+@media screen and (max-width: 768px) {
+    // form styling
+    .form {
+      width: 100%;
+      .label {
+        display: block;
+        margin-top: 20px;
+        .labelTitle {
+          font-size: 20px;
+          font-weight: bold;
+          color: rgb(27, 27, 27);
+        }
+        .textInput {
+          width: 100%;
+          margin-top: 10px;
+          margin-bottom: 10px;
+          padding: 20px 30px;
+          border-radius: 10px;
+          border: 1px solid gray;
+        }
+        .errorMessage {
+          color: red;
+          margin-bottom: 20px;
+        }
+        // textarea
+        .textarea {
+          width: 100%;
+          min-height: 200px;
+          margin-top: 10px;
+          margin-bottom: 20px;
+          padding: 20px 30px;
+          box-sizing: border-box;
+          border-radius: 10px;
+          border: 1px solid gray;
+        }
+        .checkbox {
+          width: 20px;
+          height: 20px;
+          cursor: pointer;
+          border-radius: 4px;
+          border: 1px solid gray;
+          pointer-events: auto;
+        }
+        .checkbox:checked {
+          background-color: black;
+        }
+      }
+      .checkLabel {
+        .textBox {
+          width: 100%;
+          height: 200px;
+          border-radius: 5px;
+          border: 0.2px solid gray;
+          margin: 20px 0 30px 0;
+          overflow: scroll;
+        }
+        .checkboxContainer {
+          display: flex;
+          align-items: center;
+          margin-bottom: 10px;
+          gap: 20px;
+        }
+    
+        .checkbox {
+          width: 20px;
+          height: 20px;
+          cursor: pointer;
+          border-radius: 4px;
+          border: 1px solid gray;
+          margin-right: 10px;
+        }
+    
+        .errorMessage {
+          color: red;
+          margin-bottom: 20px;
+        }
+    
+        .checkbox:checked {
+          background-color: black;
+        }
+      }
+    }
+    .button {
+      padding: 15px 50px;
+      border-radius: 20px;
+      border: 1px solid gray;
+    }
+    .button:hover {
+      background-color: black;
+      color: white;
+    }
+  }
\ No newline at end of file
diff --git a/src/app/contact/page.tsx b/src/app/contact/page.tsx
index ec6ae9d..e8aba21 100644
--- a/src/app/contact/page.tsx
+++ b/src/app/contact/page.tsx
@@ -12,12 +12,33 @@ import SubPageSecTitle from '@/components/atoms/SubPageSecTitle'
 import SubPageTitleBox from '@/components/molecules/SubPageTitleBox'
 import SubPageMainText from '@/components/atoms/SubPageMainText'
 
+// zod
+import { ContactIndividualSchema, ContactIndividualType } from '@/schema/individual'
+// import { ContactCorporationSchema, ContactCorporationType } from '@/schema/corporation'
+import { zodResolver } from '@hookform/resolvers/zod'
+import { SubmitHandler, useForm } from 'react-hook-form'
+
+interface ContactFormProps {}
+
 
 const Contact = () => {
 
     // formの切り替え
     const [form, setForm] = useState<'personal' | 'company'>('personal');
 
+    const handleOnSubmit: SubmitHandler<ContactIndividualType> = (data) => {
+        console.log(data)
+    }
+
+    const {
+        register,
+        handleSubmit,
+        formState: { errors: formatError, isValid, isSubmitting },
+    } = useForm<ContactIndividualType>({
+        mode: 'onBlur',
+        resolver: zodResolver(ContactIndividualSchema),
+    })
+
 
     return(
         <div className={styles.about}>
@@ -45,29 +66,179 @@ const Contact = () => {
                     />
                     <div className={styles.formBox}>
                         <div className={styles.flexButton}>
-                        <button
-                            className={`${styles.personalButton} ${form === 'personal' ? styles.active : ''}`}
-                            onClick={() => setForm('personal')}
-                        >
-                            個人の方
-                        </button>
-                        <button
-                            className={`${styles.companyButton} ${form === 'company' ? styles.active : ''}`}
-                            onClick={() => setForm('company')}
-                        >
-                            法人の方
-                        </button>
+                            <button
+                                className={`${styles.personalButton} ${form === 'personal' ? styles.active : ''}`}
+                                onClick={() => setForm('personal')}
+                            >
+                                個人の方
+                            </button>
+                            <button
+                                className={`${styles.companyButton} ${form === 'company' ? styles.active : ''}`}
+                                onClick={() => setForm('company')}
+                            >
+                                法人の方
+                            </button>
                         </div>
                         <div className={styles.formBox}>
                         {form === 'personal' ? (
-                            <div>
-                            <h1>Person Form</h1>
-                            {/* ここに実際の個人の方向けのフォームを配置 */}
+                            <div className={styles.box}>
+                            <h1>個人のお客様用お問い合わせフォーム</h1>
+                            <form
+                                className={styles.form}
+                                method="post"
+                                onSubmit={(event) => {
+                                void handleSubmit(handleOnSubmit)(event)
+                                }}
+                            >
+                                {/* email */}
+                                <label className={styles.label}>
+                                <div className={styles.labelTitle}>メールアドレス</div>
+                                <input
+                                    type="text"
+                                    {...register('email')}
+                                    className={styles.textInput}
+                                    placeholder="例）mail@example.com"
+                                />
+                                {formatError.email && (
+                                    <div className={styles.errorMessage}>
+                                    {formatError.email.message}
+                                    </div>
+                                )}
+                                </label>
+
+                                {/* name */}
+                                <label className={styles.label}>
+                                <div className={styles.labelTitle}>お名前</div>
+                                <input
+                                    type="text"
+                                    {...register('name')}
+                                    className={styles.textInput}
+                                    placeholder="例）山田太郎"
+                                />
+                                {formatError.name && (
+                                    <div className={styles.errorMessage}>
+                                    {formatError.name.message}
+                                    </div>
+                                )}
+                                </label>
+
+                                {/* kana */}
+                                <label className={styles.label}>
+                                <div className={styles.labelTitle}>フリガナ</div>
+                                <input
+                                    type="text"
+                                    {...register('kana')}
+                                    className={styles.textInput}
+                                    placeholder="例）ヤマダタロウ"
+                                />
+                                {formatError.kana && (
+                                    <div className={styles.errorMessage}>
+                                    {formatError.kana.message}
+                                    </div>
+                                )}
+                                </label>
+
+                                {/* tel */}
+                                <label className={styles.label}>
+                                <div className={styles.labelTitle}>電話番号</div>
+                                <input
+                                    type="text"
+                                    {...register('telephone')}
+                                    className={styles.textInput}
+                                    placeholder="例）09012345678"
+                                />
+                                {formatError.telephone && (
+                                    <div className={styles.errorMessage}>
+                                    {formatError.telephone.message}
+                                    </div>
+                                )}
+                                </label>
+
+                                {/* title */}
+                                <label className={styles.label}>
+                                <div className={styles.labelTitle}>件名</div>
+                                <input
+                                    type="text"
+                                    {...register('title')}
+                                    className={styles.textInput}
+                                    placeholder="例）お問い合わせ"
+                                />
+                                {formatError.title && (
+                                    <div className={styles.errorMessage}>
+                                    {formatError.title.message}
+                                    </div>
+                                )}
+                                </label>
+
+                                {/* message */}
+                                <label className={styles.label}>
+                                <div className={styles.labelTitle}>お問い合わせ内容</div>
+                                <textarea
+                                    {...register('message')}
+                                    className={styles.textarea}
+                                    placeholder="例）お問い合わせ内容"
+                                />
+                                {formatError.message && (
+                                    <div className={styles.errorMessage}>
+                                    {formatError.message.message}
+                                    </div>
+                                )}
+                                </label>
+
+                                {/* agree */}
+                                <label className={styles.checkLabel}>
+                                    <div className={styles.textBox}>
+                                        <p className={styles.text}>
+                                        個人情報の取り扱いについて<br />
+                                        Simple株式会社（以下、「当社」という）では、お預かりした個人情報は下記の通りに厳粛に管理保護してまいります。<br />
+                                        本同意書の内容を確認、ご理解いただき同意ボタンを押していただきますと情報が送信されます。<br />
+                                        <br />
+                                        （本お問い合わせ及びサービスにおける個人情報について）<br />
+                                        お問い合わせに際してお預かりする個人情報については、当該お問い合わせのためにのみ利用させていただきます。<br />
+                                        <br />
+                                        （個人情報の第三者提供について）<br />
+                                        当社は、ご利用者様の個人情報を、事前の同意なく第三者提供することはありません。ただし、次の各号の場合は除くものとします。<br />
+                                        <br />
+                                        ①第三者への提供について<br />
+                                        当社では法律・法令などに基づく場合を除きましては、お預かりしました個人情報は、本人の同意を得ずに、第三者への提供はいたしません。<br />
+                                        <br />
+                                        ②個人情報提供の任意性について<br />
+                                        個人情報の提供は原則任意です。ただし、個人情報を提供いただけない場合は、該当事項につきまして当社からの情報やサービスなどのご提供ができない場合がございます。<br />
+                                        <br />
+                                        ③開示対象個人情報の「利用目的の通知」「開示」「訂正、追加または削除」「利用または提供の拒否」に関して<br />
+                                        個人情報を提供されたお客様は、該当情報に関して「利用目的の通知」「開示」「訂正、追加または削除」「利用または提供の拒否」を要求する権利を有しています。<br />
+                                        </p>
+                                    </div>
+                                <div className={styles.checkboxContainer}>
+                                    <input
+                                    type="checkbox"
+                                    value="true"
+                                    {...register('agree')}
+                                    className={styles.checkbox}
+                                    />
+                                    <p>個人情報の取り扱いに同意する</p>
+                                </div>
+                                {formatError.agree && (
+                                    <div className={styles.errorMessage}>
+                                    {formatError.agree.message}
+                                    </div>
+                                )}
+                                </label>
+
+                                {/* Submit Button */}
+                                <button
+                                type="submit"
+                                disabled={!isValid || isSubmitting}
+                                className={styles.button}
+                                >
+                                送信する
+                                </button>
+                            </form>
                             </div>
                         ) : (
-                            <div>
-                            <h1>Company Form</h1>
-                            {/* ここに実際の法人の方向けのフォームを配置 */}
+                            <div className={styles.box}>
+                            <h1>法人のお客様用お問い合わせフォーム</h1>
+                            
                             </div>
                         )}
                         </div>

From b43a3d1d89a3c4a0be214e63829675cbb67b933b Mon Sep 17 00:00:00 2001
From: "k_95.21" <kohta0421kochi@gmail.com>
Date: Sun, 19 Nov 2023 17:51:13 +0900
Subject: [PATCH 4/4] add about page maintext

---
 src/app/about/page.tsx                              | 13 +++++++++++++
 .../atoms/styles/SubPageMainText.module.scss        |  1 +
 2 files changed, 14 insertions(+)

diff --git a/src/app/about/page.tsx b/src/app/about/page.tsx
index 4de1d65..3bb71e2 100644
--- a/src/app/about/page.tsx
+++ b/src/app/about/page.tsx
@@ -44,6 +44,19 @@ const About = () => {
                         id={1}
                         text='「新たな価値を生みだす世界的なマーケットプレイスを創る」。これは誰もが簡単にモノの売り買いを楽しむことによって、資源を循環させる豊かな社会、そして個人がやりたいことを実現できる社会をつくっていきたいという想いから掲げたミッションです。たとえば、クローゼットの中で眠っていた洋服や、いらなくなったからと捨てていたモノが、メルカリを通じてほかの誰かの役に立つように、誰かにとって価値がなくなってしまったモノを、別の誰かの「新たな価値」に変えることができる。そんなマーケットプレイスを国境や文化、言語を超え、世界中で展開することで、人々がモノを大切に使う循環型社会の実現を目指していきたいと考えています。'
                     />
+                    <SubPageMainText
+                        id={1}
+                        text='また、最初から世界を目指してきたメルカリは、創業の翌年である2014年からUSへ進出し、事業を展開してきました。USは人種や国籍、宗教など人々のバックグラウンドが多様で、州ごとにも法律や文化が異なるため、サービスを成長させるには複雑な問題や課題に挑戦する必要があります。だからこそ、USは世界の縮図と言え、今後メルカリを世界に展開していくためには、必ず成功しなければならない重要な国であると考えています。当然、日本に比べて難易度は高いですが、USでの成功がメルカリのミッションの達成に大きく寄与するため、挑戦を続けます。'
+                    />
+                    <SubPageTitleBox
+                        id={1}
+                        enTitle='more'
+                        jaTitle='信用を創造して、なめらかな社会を創る'
+                    />
+                    <SubPageMainText
+                        id={1}
+                        text='「信用を創造して、なめらかな社会を創る」。これはメルペイが創業時から掲げているミッションです。 一人ひとりが持つ、フリマアプリ「メルカリ」やスマホ決済サービス「メルペイ」の利用を通じて得た「信用」を可視化し、その「信用」に基づいてお金を自由に使える“なめらかな社会”を創る。そうすることで、誰もが今よりも自由・平等にお金を使い、欲しいモノを手に入れるだけでなく、やりたいことが叶う社会を実現したいと考えています。 メルペイが目指すのは、単なる便利なお金ではありません。社会のあり方を、お金との付き合い方を、働き方を、夢を実現する方法を変えていくことが、メルペイの目標であり、使命だと考えています。'
+                    />
                     <SubPageSecTitle
                         id={2}
                         text='Service Overview'
diff --git a/src/components/atoms/styles/SubPageMainText.module.scss b/src/components/atoms/styles/SubPageMainText.module.scss
index 738bc02..3332bd8 100644
--- a/src/components/atoms/styles/SubPageMainText.module.scss
+++ b/src/components/atoms/styles/SubPageMainText.module.scss
@@ -1,4 +1,5 @@
 .textBox {
+    margin-bottom: 50px;
     .text{
         color: var(--main-black-color);
         font-size: 18px;