[WIP] [DCJ2025-117] 開催概要ブロックを実装

_includes/top/sections/event-summary.html

@@ -0,0 +1,33 @@
+<section id="event-summary">
+  <div class="d-flex flex-column align-items-center text-center">
+    <h2 class="title">開催概要</h2>
+    <p class="subtitle">OUTLINE</p>
+    <div class="item-list">
+      <div class="event-box d-flex flex-column align-items-center">
+        <div class="image-wrapper">
+
+        </div>
+        <p class="event-desc">開催日時</p>
+      </div>
+      <div class="event-box d-flex flex-column align-items-center">
+        <div class="image-wrapper" style="overflow: visible;">
+          <img style="z-index: -1; position: absolute; top: -140px; left: -200px" src="/img/2025/top/fukuoka.svg" width="650" height="650" />
+          <img style="z-index: 1; position: absolute; top: 140px; left: 216px" src="/img/2025/top/kappa_ninja.svg" width="156" height="176" />
+        </div>
+        <p class="event-desc">福岡県久留米市六ツ門町８−１</p>
+      </div>
+      <div class="event-box d-flex flex-column align-items-center">
+        <div class="image-wrapper">
+          <img style="z-index: -1;position: absolute; top: -31px; left: -4px" src="/img/2025/top/building.svg" width="350" height="350" />
+        </div>
+        <p class="event-desc">久留米市シティプラザ</p>
+      </div>
+      <div class="event-box d-flex flex-column align-items-center">
+        <div class="image-wrapper">
+          <img style="z-index: -1;position: absolute; top: -110px; left: -100px" src="/img/2025/top/free.svg" width="500" height="500" />
+        </div>
+        <p class="event-desc">参加無料</p>
+      </div>
+    </div>
+  </div>
+</section>

_sass/global/base.scss

@@ -76,7 +76,7 @@ a {
 section {
   margin: 0 auto;
   padding: 3rem 0;
-  width: 100vw;
+  width: 100%;
   clear: both;
   overflow: hidden;
 

_sass/pages/index.scss

@@ -41,4 +41,45 @@
     background-color: #e0e0e0;
     color: #0e0e0e;
   }
+}
+
+#event-summary {
+  .title {
+    font-size: 36px;
+    letter-spacing: 0.125rem;
+    margin-bottom: 4px;
+  }
+  .subtitle {
+    font-size: 24px;
+    letter-spacing: 0.065rem;
+    margin-bottom: 43px;
+    font-weight: bold;
+  }
+
+  .image-wrapper {
+    margin-bottom: 18px;
+    width: 300px;
+    height: 300px;
+    position: relative;
+  }
+
+  .item-list {
+    display: grid;
+    gap: 18px;
+    grid-template-columns: repeat(4, 1fr);
+
+  @media (max-width: 1254px) {
+    grid-template-columns: repeat(2, 1fr); /* 2x2表示 */
+  }
+
+  @media (max-width: 768px) {
+    grid-template-columns: 1fr; /* 1x4表示 */
+  }
+}
+
+  .event-desc {
+    font-size: 20px;
+    letter-spacing: 0.0625rem;
+    font-weight: bold;
+  }
 }