Merge pull request #25 from kohta9521/develop

Develop
kohta9521 · Nov 21, 2023 · 8c065e0 · 8c065e0
2 parents da50573 + 8e51988
commit 8c065e0
Show file tree

Hide file tree

Showing 3 changed files with 107 additions and 6 deletions.
diff --git a/src/components/organisms/styles/About.module.scss b/src/components/organisms/styles/About.module.scss
@@ -90,15 +90,14 @@
     }
 }
 
-@media screen and (max-width: 1026px) {
+@media screen and (max-width: 1024px) {
     .about {
         position: relative;
         width: 100%;
-        height: 1300px;
+        height: 1400px;
         margin-top: -90px;
         border-radius: 30px 30px 0 0;
         background-color: var(--main-red-color);
-        z-index: -1;
         .container {
             width: 90%;
             max-width: 1900px;
@@ -123,7 +122,6 @@
                         .enTitle {
                             font-size: 55px;
                             line-height: 60px;
-                            margin-top: 30px;
                             font-weight: 700;
                             color: var(--main-white-color);
                         }
@@ -155,7 +153,7 @@
                     .rightBox {
                         width: 100%;
                         .image {
-                            width: 100%;
+                            height: 100%;
                         }
                     }
                 }

diff --git a/src/components/organisms/styles/News.module.scss b/src/components/organisms/styles/News.module.scss
@@ -99,7 +99,7 @@
             width: 90%;
             height: 100%;
             margin: 0 auto;
-            background-color: #0051CB;
+            background-color: var(--main-red-color);
             border-radius: 20px;
             padding: 20px 20px;
             .subTitle {

diff --git a/src/components/organisms/styles/Service.module.scss b/src/components/organisms/styles/Service.module.scss
@@ -95,4 +95,107 @@
             }
         }
     }
+}
+
+@media screen and (max-width: 1024px) {
+    .service {
+        width: 100%;
+        height: 800px;
+        .container {
+            width: 90%;
+            max-width: 1400px;
+            height: 100%;
+            margin: 0 auto;
+            padding: 100px 0px;
+            box-sizing: border-box;
+            .flexBox {
+                display: block;
+                .leftBox {
+                    position: relative;
+                    width: 330px;
+                    height: 230px;
+                    z-index: 1;
+                    border-radius: 10px;
+                    margin: 0 auto;
+                    .image {
+                        width: 100%;
+                        border-radius: 10px;
+                    }
+                    &::after {
+                        position: absolute;
+                        top: 20px;
+                        right: 20px;
+                        content: '';
+                        width: 330px;
+                        height: 230px;
+                        border-radius: 10px;
+                        background-color: var(--main-red-color);
+                        z-index: -1;
+                    }
+                }
+                .rightBox {
+                    text-align: right;
+                    margin-top: 80px;
+                    .subTitle {
+                        color: var(--main-red-color);
+                        font-size: 14px;
+                        font-weight: 700;
+                        display: block;
+                    }
+                    .title {
+                        font-size: 60px;
+                        line-height: 65px;
+                        font-weight: 700;
+                        color: var(--main-black-color);
+                        margin-bottom: 30px;
+                    }
+                    .mainText {
+                        display: block;
+                        font-size: 14px;
+                        line-height: 26px;
+                        color: var(--main-black-color);
+                        margin-bottom: 40px;
+                    }
+                    .link {
+                        width: 170px;
+                        height: 60px;
+                        text-decoration: none;
+                        font-size: 16px;
+                        font-weight: 700;
+                        display: flex;
+                        align-items: center;
+                        margin-left:200px;
+                        .arrow {
+                            display: block;
+                            width: 40px;
+                            height: 40px;
+                            margin-right: 20px;
+                            border-radius: 30px;
+                            text-align: center;
+                            background-color: var(--main-red-color);
+                            // text
+                            font-size:20px;
+                            line-height: 35px;
+                            font-weight: 700;
+                            color: var(--main-white-color);
+                            font-size: 25px;
+                            height: 40px;
+                            line-height: 35px;
+                            font-weight: 700;
+                            color: var(--main-white-color);
+                        }
+                        &:hover {
+                            transform: all 0.5s ease-in-out;
+                            .arrow{
+                                width: 50px;
+                                height: 50px;
+                                transition: all 0.3s ease-in-out;
+                                line-height: 45px;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
 }