wip: 開催概要実装

Fukusan64 · Fukusan64 · commit 6375905cfbe2 · 2025-08-05T22:21:26.000+09:00
残件: 画像上の文字系の部分をどうするか...
diff --git a/_includes/top/sections/event-summary.html b/_includes/top/sections/event-summary.html
@@ -4,19 +4,28 @@ <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="event-img"></div>
+        <div class="image-wrapper">
+
+        </div>
         <p class="event-desc">開催日時</p>
       </div>
       <div class="event-box d-flex flex-column align-items-center">
-        <div class="event-img"></div>
+        <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="event-img"></div>
+        <div class="image-wrapper">
+          <img style="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="event-img"></div>
+        <div class="image-wrapper">
+          <img style="position: absolute; top: -110px; left: -100px" src="/img/2025/top/free.svg" width="500" height="500" />
+        </div>
         <p class="event-desc">参加無料</p>
       </div>
     </div>
diff --git a/_sass/pages/index.scss b/_sass/pages/index.scss
@@ -56,12 +56,11 @@
     font-weight: bold;
   }
 
-  .event-img {
+  .image-wrapper {
     margin-bottom: 18px;
     width: 300px;
     height: 300px;
-    background:#ccc;
-    border-radius: 8px;
+    position: relative;
   }
 
   .item-list {
diff --git a/img/2025/top/building.svg b/img/2025/top/building.svg
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="contents" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 800 800">
+  <!-- Generator: Adobe Illustrator 29.5.1, SVG Export Plug-In . SVG Version: 2.1.0 Build 141)  -->
+  <defs>
+    <style>
+      .st0 {
+        fill: #a1c83e;
+      }
+    </style>
+  </defs>
+  <path class="st0" d="M305.6,659.4V243.3l-157.3,55.4v337.7l33.1,4.5v-57.4l80.9,4.6v63.8l43.3,7.5ZM255.1,308.9l29.6-8.7v37.4l-29.6,7.3v-36.1ZM255.1,373.8l29.6-6.3v37.4l-29.6,4.9v-36.1ZM187.3,480.4l-23.2,2v-32l23.2-3v33ZM187.3,421.1l-23.2,3.8v-32l23.2-4.9v33ZM187.3,361.8l-23.2,5.7v-32l23.2-6.8v33ZM233,476.5l-26.1,2.2v-33.9l26.1-3.4v35.1ZM233,413.5l-26.1,4.3v-33.9l26.1-5.5v35.1ZM233,350.5l-26.1,6.5v-33.9l26.1-7.6v35.1ZM255.1,474.7v-36.1l29.6-3.9v37.4l-29.6,2.5Z"/>
+  <path class="st0" d="M479.4,685V115l-157.3,55.4v492.2l33.1,5.6v-95.3l80.9,4.6v101.7l43.3,5.9ZM429,173.9l29.6-10.1v37.4l-29.6,8.8v-36.1ZM429,236.7l29.6-8.7v37.4l-29.6,7.3v-36.1ZM429,301.6l29.6-6.3v37.4l-29.6,4.9v-36.1ZM361.2,408.2l-23.2,2v-32l23.2-3v33ZM361.2,348.9l-23.2,3.8v-32l23.2-4.9v33ZM361.2,289.6l-23.2,5.7v-32l23.2-6.8v33ZM361.2,227.9l-23.2,7.2v-32l23.2-8.2v33ZM406.8,404.4l-26.1,2.2v-33.9l26.1-3.4v35.1ZM406.8,341.3l-26.1,4.3v-33.9l26.1-5.5v35.1ZM406.8,278.3l-26.1,6.5v-33.9l26.1-7.6v35.1ZM406.8,215.3l-26.1,7.9v-33.9l26.1-9.1v35.1ZM429,402.5v-36.1l29.6-3.9v37.4l-29.6,2.5Z"/>
+  <polygon class="st0" points="495.4 116.3 495.4 683.9 651.7 668.4 651.7 138.7 495.4 116.3"/>
+</svg>
diff --git a/img/2025/top/free.svg b/img/2025/top/free.svg
@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="_レイヤー_1" data-name="レイヤー_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1600 1200">
+  <!-- Generator: Adobe Illustrator 29.5.1, SVG Export Plug-In . SVG Version: 2.1.0 Build 141)  -->
+  <defs>
+    <style>
+      .st0 {
+        fill: #a1c83e;
+      }
+
+      .st1 {
+        fill: #fff;
+      }
+    </style>
+  </defs>
+  <path class="st0" d="M1175.4,529.7c-9.6-35.7,30.6-92.1,12.5-123.4-18.4-31.7-87.4-25-113.2-50.8h0c-25.8-25.8-19-94.8-50.8-113.2-31.3-18.1-87.6,22.1-123.4,12.5-34.5-9.2-63.2-72.5-100.6-72.5s-66.1,63.2-100.6,72.5c-35.7,9.6-92.1-30.6-123.4-12.5-31.7,18.4-25,87.4-50.8,113.2-25.8,25.8-94.8,19-113.2,50.8-18.1,31.3,22.1,87.6,12.5,123.4-9.2,34.5-72.5,63.2-72.5,100.6s63.2,66.1,72.5,100.6c9.6,35.7-30.6,92.1-12.5,123.4,18.4,31.7,87.4,25,113.2,50.8,0,0,0,0,0,0,25.8,25.8,19,94.8,50.8,113.2,31.3,18.1,87.6-22.1,123.4-12.5,34.5,9.2,63.2,72.5,100.6,72.5s66.1-63.2,100.6-72.5c35.7-9.6,92.1,30.6,123.4,12.5,31.7-18.4,25-87.4,50.8-113.2,25.8-25.8,94.8-19,113.2-50.8,18.1-31.3-22.1-87.6-12.5-123.4,9.2-34.5,72.5-63.2,72.5-100.6s-63.2-66.1-72.5-100.6Z"/>
+  <g>
+    <path class="st1" d="M503,774.2v-287.7h122.8v38.8h-81.6v87.3h71.1v38.8h-71.1v122.8h-41.2Z"/>
+    <path class="st1" d="M652.5,774.2v-287.7h66.3c48.5,0,72.7,28.2,72.7,84.5s-2.6,31.4-7.9,43.2c-5.3,11.9-14.5,21.4-27.7,28.7l44.4,131.3h-43.6l-38.4-122.8h-24.7v122.8h-41.2ZM693.7,525.3v89.7h23.4c7.3,0,13.1-1,17.4-3,4.3-2,7.7-4.9,10.1-8.7,2.2-3.8,3.6-8.4,4.4-13.9.8-5.5,1.2-11.9,1.2-19.2s-.4-13.7-1.2-19.2c-.8-5.5-2.4-10.3-4.8-14.3-5.1-7.5-14.8-11.3-29.1-11.3h-21.4Z"/>
+    <path class="st1" d="M824.6,774.2v-287.7h122.8v38.8h-81.6v84.5h71.1v38.8h-71.1v84.5h81.6v41.2h-122.8Z"/>
+    <path class="st1" d="M974.2,774.2v-287.7h122.8v38.8h-81.6v84.5h71.1v38.8h-71.1v84.5h81.6v41.2h-122.8Z"/>
+  </g>
+</svg>
diff --git a/img/2025/top/fukuoka.svg b/img/2025/top/fukuoka.svg
@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="_レイヤー_1" data-name="レイヤー_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1366 768">
+  <!-- Generator: Adobe Illustrator 29.5.1, SVG Export Plug-In . SVG Version: 2.1.0 Build 141)  -->
+  <defs>
+    <style>
+      .st0 {
+        fill: #a1c83e;
+      }
+    </style>
+  </defs>
+  <path class="st0" d="M683,102.8l14,3.2,10.6-3.2,4.4,8.2,18,2,12.7-5.1,12.9-5.1,4.4-5.8h4.9v-12.4l7.1-2.6,7-2-3-9h6.7l3.3-2,17,3v5h5v-4.4l7-.6-2,6,2,2.6,5-7.6,3,4-3,2-2,2h5l4-3,3-1v-3.6l6-.4v4l4-2,3-1,4,3h2c2,0,5,1,5,1v4.3l-5,1.7v4l5-.3v5.8l-1.3,1.1-1.7,1.4-3,1-2,2-10,3-15,2,16,1-7,2-9,3h-3l-4-8-3,2,3,7-3.3,2,1.3,2,20-5v3l4-2v-3l7-2,3-2v5l-1.6,6,7.6-4-3-10,3-1,6.2-8-.2-8,3-3,7-4,11-2,2,3-8,4v3l11-3-10,7,.2,3h2.7l1.1-3,9-3,6.3,6-4.3,3-7,2,4,2,7.3-1.6,3.7-2.4v2.4l-7,4.6,7,.3,3-.3,8-2,8-3s4.7-2,5.3-5c.7-3,3.7-10,3.7-10l3-7,2-6,8-4,2-3v-9.9l8,1.9h10l4-7h4.2l-3.2,6,3.2.4,2.8-2.4,8,3-5,6s1,3,1,4v1l-3,2h-2l-1,6,2,3-5,2-.9,3h6.7l-3.8,4v8l-3,1-3-3-4,6,8,4v12l-4-2-3-6-3,2v11h6.9l-2.9,9-1,4h-1.9l-4.1,5-3-3v10l-8-3-2.7,3,2.7,10,3,6h11.2l9.8-5,2.2,5-4.2,3,1,3-8,4,1,5,6-5,3,9-5,4,4,4,6-3,2,5-8,8,2,6,3,3,1-6,4,4-2,10h5v10.7l5,13.3,8,7h3.8l3.2,11,6,6v7.1l6,1.9,4,13,5,3,3,6,7,4v-5.7l3,2.7v-8.9l6,2.9,3-2,15,8,5,1,4-1,5-1,3,1v11.1l-6,5.9-2,7v4l3,5,7,5v16.7l-8,5.3-4,6,1,6s5,2,5,3-2,5-2,5l-10-3-7,3h-9l-2.2,3.5-6.8-2.5-5-4-5,3-4-1h-7c-2,0-8-2-8-2h-8s-4-1-5-1-7-6-7-6l-7,4-4,2h-11l-7,2-7,2-4,5-8.2,6-6.8,5-10,4,3,8v4l-7,4-10,5-5,2-1,11,1,13-1,7v6l-1,8-3,2h-7.7l-2.3,5-1,6-8,8-4,6,3,3h3.4l4.6,19,4,9-1,6-5.5,6.2s-1.5,3.9,0,5.3c1.5,1.4,6.5,3.4,7.5,4.4l1,1v4s-10,1-12,1-7,2-7,2c0,0-5,3-5,5s2,9,2,9l19,3-3,4-6,5-6,3,1,4,16,10,12,3v10l-6,4v11l-4,4-1,9-3,7-1,5-2,3-2.5,3.2-5.5,3.8h-13s1-6,0-6-8-2-10-3-10-6-10-6l-9,1s-5-6-8-7-5-5-7-6-5-6-5-6c0,0-3-1-5-1h-8l-13,1v-6l-7-7-3,6-7,4s1,8,0,9,4,6,4,6l-6,4s1,5,0,7-2,6-2,6c0,0,1,0-4,0s-16-2-16-2l-5,2-9-1-14-1-5.3,6h-2.7v10l-12,6-7,6s-1,4-1,5-10,2-10,2l-7,7-3,3,4,7,2,8,4,9v4l-6,3h-7.6l-14.4,3h-29.6c-2.4,0-8.9,2-8.9,2l-3.6-4,4-3,13-1-9-6,6-7,1-4-1-8,2-8-2-8-4-13-13-5,4-9-16-10,3-4v-8l-11-1v-20.2l-2-3.8v-4.2s-1-3.8-3-5.8-4-5-4-5l4-11h6l6-7h7l2-4v-3l-6-5v-6h5l5,1,2-6-1-6,7-1,2,6,1,4,4-2,4-11v-3l4-1v-6l-1-6,5-4,2,4-2,5,1,6,1,5,4,2h5l-2-11,6-2,7-2-2-3-6-3-1-3v-2s5,0,7-1,5-1,5-1l4-1,2-3,1-4-3-5-6-4,5-4,3,3s3,2,4,2h5c2-3,2-12,2-12l4-1,3,2s-1,.2,2,.1,6-.1,6-.1l5-15s1-12,1-16,1-9,0-14-2-12-2-12l-1-6-3-5-4-2-6-4-3,4-3-3-10,4-7,4-7,3s-2,2-2,3-1,4-1,4l-7,2-2,6s-1,3-2,5-2,3-4,3-6-1-6-1l-9,2v-3l3-5v-3l-7-7-3-3h-5l-9-4h-5c-4,0-9-2-9-2l-5-6.4-7-6.6-6-3-11-5-6-4-6-6c-1-1-3-2-4-2s-11,5-11,5l-2,4-7-4s-4-1-7-2-10.3-4.5-10.3-4.5l-6.7,4.5-8,9-8-2-6-6-8-1-4,4s-8-3-9-3h-9v2.1s-2,2.9-6,2.9-8-1-11-1h-22c0-.1,4.8-9.5,4.8-9.5,0,0,4.2-3.5,2.2-4.5s-4-5-4-5l10.7-2.5h8l5.3-3.5,5-2,6-5s1,4,3,4,7-1,7-1h3l6-6-6-6,4-1s2,0,5-1,7-6,7-6l6-7,2-6-7-1-4,5-3,1-4-3-4-2,2-2v-4l-3-2-3-2-10,3h-4l1-3s-2-3-4-3-4-2-4-2c2-3,7-4,7-4l5-1v-7l6,1s-1,3,4,3,5,1,9,0,11-9,11-9v-7l-3-4,5-8h4c3,0,3,2,7-1s13-8,13-8l4-5-2-12h3s2,1,4,3,5,4,5,4l4,4,1,4-6,8,2,7,3,7,6,4,13-1,6,1s1,3,0,4-7,9-7,9c0,0,1,7,2,7h6l6-3,4,4,5-3,5-2-1-8h5l2,5h2l2-4,6,1-1,5h4l4-5h3l8-5,3-1h2v4l2,3,6-1-4-4,1-4h2l3,4,5-2-5-6,4-2,6-1v-4l-8,1,2-4,4-2-2-4-1-2,4-3,2,1s3-1,3-5,3-7,3-7l3-2,3-3-3-7-2-1,4-5h-14l-5,1,2,5-7,3s-2,5-6,5-8,1-8,1l-4,8-1,5s-3,3-5,1-7-5-7-5l-7-1v-3l-9-4-6,2-6-4-3-6v-6l2-6s7-1,7,1,2,3,3,5,1,3,2,5,1,4,3,5,5,4,5,4l9,1,16-9,15-10,12-10,4-13,4,2,5-3,11-12,5-10,3-14v-5l-4-5h-7l-4-7,3-4-1-7-3-5,4-1,5,5h7c2,0,7-7,7-7v-6c0-4-3-20-3-20h4l1,3s2,1,5,1,11-2,11-2l6-7.2,3-6.8-3-9.2Z"/>
+  <path class="st0" d="M848,72l-11-2v-4.1h3.4l4.6-4.9h7v5.5s10-5.5,12-5.5,7.6,5.5,7.6,5.5l-13.8,5.5-3.5,1.4-6.3-1.4Z"/>
+  <polygon class="st0" points="675 100 670.7 100 663 88 669 85.4 669 89.9 669 92.7 675 100"/>
+  <polygon class="st0" points="630 107 616 100 616 89 627.1 89 633.3 85.4 640 85.4 640 89 634.2 92.7 632.9 100 632 103 630 107"/>
+  <polygon class="st0" points="587 200 587 194.3 590 191 598.2 191 600.4 195.5 593.7 195.5 587 200"/>
+  <path class="st0" d="M519,251l-9-5v-3.7s-1-.3,2-.3h7v9Z"/>
+  <polygon class="st0" points="554 302 552 295 552 290.8 553 282.8 554 279.2 559 287 560.9 290.6 561 296 561 299.2 554 302"/>
+  <polygon class="st0" points="409 330 405 325 409 321.9 409 325.9 409 330"/>
+  <polygon class="st0" points="447 345 447 338.3 452 333 452 339 447 345"/>
+  <polygon class="st0" points="860 38 854.3 29.4 852 27 854.3 24.6 860 26.8 860 38"/>
+</svg>
diff --git a/img/2025/top/kappa_ninja.svg b/img/2025/top/kappa_ninja.svg

Original file line number	Diff line number	Diff line change
`@@ -56,12 +56,11 @@`
`56`	`56`	`font-weight: bold;`
`57`	`57`	`}`
`58`	`58`
`59`		`- .event-img {`
	`59`	`+ .image-wrapper {`
`60`	`60`	`margin-bottom: 18px;`
`61`	`61`	`width: 300px;`
`62`	`62`	`height: 300px;`
`63`		`- background:#ccc;`
`64`		`- border-radius: 8px;`
	`63`	`+ position: relative;`
`65`	`64`	`}`
`66`	`65`
`67`	`66`	`.item-list {`