saitamau-maximum · yukikamome316 · Mar 28, 2024 · Mar 21, 2024 · Mar 21, 2024 · Mar 21, 2024
diff --git a/public/images/hero.png b/public/images/hero.png
diff --git a/public/images/hero2.png b/public/images/hero2.png
diff --git a/src/app/achievements/[slug]/page.tsx b/src/app/achievements/[slug]/page.tsx
@@ -22,11 +22,6 @@ export async function generateStaticParams() {
   return params;
 }
 
-interface ResolvingMetadata {
-  title: string;
-  description: string;
-}
-
 export async function generateMetadata({ params }: Props): Promise<Metadata> {
   const { slug } = params;
   const filePath = path.join(

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,6 +1,7 @@
 import type { Metadata } from 'next';
 import { Inter } from 'next/font/google';
 import './global.css';
+import { Header } from '../components/Header/Header';
 
 const inter = Inter({ subsets: ['latin'] });
 
@@ -19,7 +20,10 @@ export default function RootLayout({
 }>) {
   return (
     <html lang='ja'>
-      <body className={inter.className}>{children}</body>
+      <body className={inter.className}>
+        <Header />
+        {children}
+      </body>
     </html>
   );
 }
diff --git a/src/app/page.module.scss b/src/app/page.module.scss
@@ -0,0 +1,366 @@
+$hovering-color: #7FCC8F;
+$span-color: #47B660;
+$heroImage-change-width: 1280px;
+$header-change-width: 1200px;
+$tablet-width: 768px;
+$background-color: #F1F1F1;
+
+/* heroImageとヘッダーのpadding調整 */
+@media (min-width: $heroImage-change-width) {
+  .heroImage {
+    width: 100%;
+    height: 60vh;
+    object-fit: cover;
+  }
+}
+
+@media (max-width: $heroImage-change-width) {
+  .heroImage {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  } 
+}
+
+@media (max-width: $header-change-width) and (min-width: $tablet-width) {
+  .main {
+    padding-top: 64px;
+    flex-direction: column;
+    background-color: $background-color;
+  }
+}
+
+@media (min-width: $header-change-width) {
+  .main {
+    padding-top: 72px;
+    flex-direction: column;
+    background-color: $background-color;
+  }
+}
+
+/* 画面幅が768px以下の場合のスタイル */
+@media (max-width: $tablet-width) {
+  .main {
+    padding-top: 64px;
+    flex-direction: column;
+    background-color: $background-color;
+  }
+
+  .hero {
+    align-items: center;
+    justify-content: center;
+    display: flex;
+    flex-direction: column;
+    background-color: $background-color;
+  }
+
+  .heroImage {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  .breadcrumb {
+    width: 100%;
+    height: 28px;
+    background-color: black;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .breadcrumbLink {
+    color: white;
+    font-size: 0.75rem; // 12px
+    text-decoration: none;
+  }
+
+  .contents {
+    width: 100%;
+    margin: auto;
+    /* imgBox1のright 0にしたときにはみ出さないようにする */
+    position: relative;
+  }
+
+  .contentTitle {
+    margin: 20px;
+    font-size: 1.25rem; // 20px
+    font-weight: normal;
+    border-bottom: 1px solid black;
+    width: 4em;
+  }
+
+  .aboutText {
+    margin: 24px;
+    font-size: 1rem; // 16px
+    align-items: center;
+    justify-content: center;
+    flex-direction: row;
+    text-align: center;
+  }
+
+  .activityCP {
+    background-color: white;
+    flex-direction: column;
+    width: 80%;
+    padding: 16px 16px 20% 16px;
+    box-sizing: border-box;
+    position: relative;
+    z-index: 1;
+    margin: 180px 0px 96px 0px;
+  }
+  .activityCPtitle p {
+    font-size: 0.75rem; // 12px
+    margin: 0px;
+  }
+  .activityCPtitle h2 {
+    margin-bottom: 0px;
+    font-size: 1.25rem; // 20px
+    border-bottom: 1px solid black;
+  }
+  .activityCPcontent {
+    font-size: 1rem; // 16px
+    margin: 16px 0px;
+  }
+  .activityLeftButtonContainer {
+    position: absolute;
+    bottom: 0;
+    transform: translateY(50%);
+    left: 64px;
+  }
+
+  .activityWeb {
+    background-color: white;
+    flex-direction: column;
+    width: 80%;
+    padding: 16px 16px 20% 16px;
+    box-sizing: border-box;
+    position: relative;
+    z-index: 1;
+    margin: 252px 0 128px auto;
+  }
+  .activityWebtitle p {
+    font-size: 0.75rem; // 12px
+    margin: 0px;
+  }
+  .activityWebtitle h2 {
+    margin-bottom: 0px;
+    font-size: 1.25rem; // 20px
+    border-bottom: 1px solid black;
+  }
+  .activityWebcontent {
+    font-size: 1rem; // 16px
+    margin: 16px 0px;
+  }
+  .activityRightButtonContainer {
+    position: absolute;
+    bottom: 0;
+    transform: translateY(50%);
+    right: 64px;
+  }
+
+  .activityOther {
+    margin: 44px;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    text-align: center;
+    font-size: 1.25rem; // 20px
+    position: relative;
+  }
+
+  .activityOtherButtonContainer {
+    margin: 12px;
+  }
+
+  .txtOther {
+    position: absolute;
+    top: -64px;
+    left: -24px;
+  }
+
+  .imgBox1 {
+    width: 80%;
+    aspect-ratio: 300 / 220;
+    z-index: 0;
+    background-color: gray;
+    position: absolute;
+    right: 0;
+  }
+
+  .imgBox2 {
+    width: 80%;
+    aspect-ratio: 300 / 220;
+    z-index: 0;
+    background-color: gray;
+    position: absolute;
+  }
+}
+
+/* 画面幅が768px以上の場合のスタイル */
+@media (min-width:768px) {
+  .hero {
+    align-items: center;
+    justify-content: center;
+    display: flex;
+    flex-direction: column;
+    background-color: $background-color;
+  }
+
+  .breadcrumb {
+    width: 100%;
+    height: 64px;
+    background-color: black;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .breadcrumbLink {
+    color: white;
+    font-size: 1.5rem; // 24px
+    text-decoration: none;
+  }
+
+  .contents {
+    width: 100%;
+    max-width: 1080px;
+    margin: auto;
+    /* imgBox1のright 0にしたときにはみ出さないようにする */
+    position: relative;
+  }
+
+  .contentTitle {
+    margin: 32px;
+    font-size: 2rem; // 32px
+    font-weight: normal;
+    border-bottom: 1px solid black;
+    width: 4em;
+  }
+
+  .aboutText {
+    margin: 48px;
+    font-size: 2rem; // 32px
+    align-items: center;
+    justify-content: center;
+    flex-direction: row;
+    text-align: center;
+  }
+
+  .activityCP {
+    background-color: white;
+    flex-direction: column;
+    width: 55%;
+    height: 400px;
+    padding: 32px;
+    box-sizing: border-box;
+    position: relative;
+    z-index: 1;
+    margin: 80px 0px 96px 0px;
+  }
+  .activityCPtitle p {
+    font-size: 1.25rem; // 20px
+    margin: 0px;
+  }
+  .activityCPtitle h2 {
+    margin-bottom: 0px;
+    font-size: 2rem; // 32px
+    border-bottom: 1px solid black;
+  }
+  .activityCPcontent {
+    font-size: 1.25rem; // 20px
+  }
+  .activityLeftButtonContainer {
+    position: absolute;
+    bottom: 0;
+    transform: translateY(50%);
+    left: 64px;
+  }
+
+  .activityWeb {
+    background-color: white;
+    flex-direction: column;
+    width: 55%;
+    height: 400px;
+    padding: 32px;
+    box-sizing: border-box;
+    position: relative;
+    z-index: 1;
+    margin: 128px 0 128px auto;
+  }
+  .activityWebtitle p {
+    font-size: 1.25rem; // 20px
+    margin: 0px;
+  }
+  .activityWebtitle h2 {
+    margin-bottom: 0px;
+    font-size: 2rem; // 32px
+    border-bottom: 1px solid black;
+  }
+  .activityWebcontent {
+    font-size: 1.25rem; // 20px
+  }
+  .activityRightButtonContainer {
+    position: absolute;
+    bottom: 0;
+    transform: translateY(50%);
+    right: 64px;
+  }
+
+  .activityOther {
+    margin: 128px;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    text-align: center;
+    font-size: 1.5rem; // 24px
+    position: relative;
+  }
+
+  .activityOtherButtonContainer {
+    margin: 48px;
+  }
+
+  .txtOther {
+    position: absolute;
+    top: -64px;
+    left: -48px;
+  }
+
+  .imgBox1 {
+    width: 55%;
+    height: 464px;
+    z-index: 0;
+    background-color: gray;
+    position: absolute;
+    right: 0;
+  }
+
+  .imgBox2 {
+    width: 55%;
+    height: 464px;
+    z-index: 0;
+    background-color: gray;
+    position: absolute;
+  }
+}
+
+/* 共通 */
+.container {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  background-color: $background-color;
+}
+
+.breadcrumbLink:hover {
+  color: $hovering-color;
+}
+
+.bold {
+  font-weight: bold;
+}
+
+.span {
+  color: $span-color;
+}