diff --git a/system/event/index.html b/system/event/index.html
new file mode 100644
index 0000000..8cb6dfb
--- /dev/null
+++ b/system/event/index.html
@@ -0,0 +1,28 @@
+
+
+
+
+
+ イベントページ
+
+
+
+
+
+
+
+
+
+
+
diff --git a/system/event/script.js b/system/event/script.js
new file mode 100644
index 0000000..77f09ef
--- /dev/null
+++ b/system/event/script.js
@@ -0,0 +1,81 @@
+ // GASからJSONデータを取得してHTML要素を生成する
+ async function fetchAndGenerateData() {
+ const response = await fetch('https://script.google.com/macros/s/AKfycbxXB5BAlZtAwDjvKMbi70uFI3C1K2tyO7wyXP3isbm-dj2dMvBdTy8afKRbwTGSKA1b/exec');
+ const jsonData = await response.json();
+ // HTML内の要素を取得
+ const nameElement = document.getElementById('name');
+ const eventContainer = document.getElementById('eventContainer');
+
+ nameElement.textContent = jsonData[0].areaID;
+
+ const categories = {};
+ // JSONデータをもとに要素を生成
+ for (const data of jsonData) {
+ const category = data.category;
+ if (!categories[category]) {
+ categories[category] = [];
+ }
+ categories[category].push(data);
+ }
+
+ for (const category in categories) {
+ const categoryContainer = document.createElement('div');
+ categoryContainer.classList.add('categoryContainer');
+
+ const h2 = document.createElement('h2');
+ h2.classList.add('category');
+ h2.textContent = category;
+ eventContainer.appendChild(h2);
+ // カテゴリーごとにメニューを追加できるようにした
+ for (const data of categories[category]) {
+ const div = document.createElement('div');
+ div.classList.add('event-item');
+
+ // pageLink データがある場合にのみ a タグを生成
+ if (data.pageLink) {
+ const a = document.createElement('a');
+ a.href = data.pageLink; // pageLink をリンク先として設定
+ a.target = '_blank';
+ div.appendChild(a);
+
+ const img = document.createElement('img');
+ img.src = data.img;
+ a.appendChild(img);
+ } else {
+ // pageLinkデータがない場合は画像のみを生成
+ const img = document.createElement('img');
+ img.src = data.img;
+ div.appendChild(img);
+ }
+
+ const h3 = document.createElement('h3');
+ h3.classList.add('eventName');
+ h3.textContent = data.eventName;
+ div.appendChild(h3);
+
+ // LocationとDateが記入されている場合に表示
+ if (data.location) {
+ const p1 = document.createElement('p');
+ p1.classList.add('location');
+ p1.textContent = `場所： ${data.location}`;
+ div.appendChild(p1);
+ }
+
+ if (data.date) {
+ const p2 = document.createElement('p');
+ p2.classList.add('date');
+ if (data.inSession === 'O') {
+ p2.textContent = `開催期間： ${data.date} (終了)`;
+ } else {
+ p2.textContent = `開催期間： ${data.date}`;
+ }
+ div.appendChild(p2);
+ }
+
+ categoryContainer.appendChild(div);
+ }
+ eventContainer.appendChild(categoryContainer);
+ }
+ }
+ // ページ読み込み時にJSONデータを取得してHTML要素を生成
+ window.addEventListener('DOMContentLoaded', fetchAndGenerateData);
\ No newline at end of file
diff --git a/system/event/style.css b/system/event/style.css
new file mode 100644
index 0000000..efef20d
--- /dev/null
+++ b/system/event/style.css
@@ -0,0 +1,146 @@
+body {
+ font-family: 'Noto Sans JP', sans-serif;
+ margin: 0;
+ padding: 0;
+ background-color: #f4f4f4;
+ width: 100%;
+}
+
+.navbar {
+ background-color: #02465b;
+ color: #f4f4f4;
+ width: 100%;
+ position: sticky;/* ２行だけの記述でfixedと同じ配置ができる*/
+ top: 0;
+ z-index: 100;
+ box-shadow: 0px 4px 8px #adadad;
+}
+
+.barContainer {
+ width: 80%;
+ margin: auto;
+ padding: 1em 0;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ }
+
+ .navbar h1 {
+ margin: 0;
+ padding: 0;
+ }
+
+ .navbar nav ul {
+ list-style: none;
+ margin: 0;
+ padding: 0;
+ display: flex;
+ }
+
+ .navbar nav ul li {
+ margin-right: 1em;
+ }
+
+ .navbar nav ul li a {
+ text-decoration: none;
+ color: #f4f4f4;
+ }
+
+ .navbar nav ul li a:hover {
+ border-bottom: 2px solid #ccb540;
+ }
+
+ .navbar nav ul li:nth-child(2) a {
+ color: #ccb540;
+ }
+ /* ここまでは共通で記載する */
+ .category{
+ border-bottom: 1px solid #acacac;
+ width: 100%;
+ }
+ .categoryContainer{
+ display: grid;
+ grid-template-columns: repeat(auto-fit, 300px);
+ justify-content: center;
+ grid-gap:1em;
+ /*
+ ウィンドウに合わせて自動で改行(中央揃え左揃え)を再現するにはflexboxでは難しかった。
+ flex-wrap:wrapとjustify-content:centerでは改行した時に真ん中配置から始まっちゃうよーうまくいかないよー(>_<)
+ しかし、gridなら4行でいけた。もっと短くできるかも。
+ */
+ }
+ #eventContainer {
+ width: 80%;
+ margin:0 auto;
+ }
+
+ .event-item {
+ background-color: #ffffff;
+ border-radius: 10px;
+ box-shadow: 0px 0px 8px #acacac;
+ padding: 0;
+ text-align: center;
+ width: 300px;
+ margin: .5em auto;
+ }
+
+ .event-item:hover {
+ transform: scale(1.1);
+ transition: transform 0.3s ease;
+ }
+
+ .event-item img {
+ width: 100%;
+ height: 25vh;
+ object-fit: cover;
+ border-radius: 10px 10px 0 0 ;
+ padding: 0;
+ }
+
+ .event-item a img:hover{
+ opacity:0.5;
+ }
+
+ .event-item h3 {
+ margin: 0 1em;
+ font-size: 110%;
+ border-bottom: 2px solid #acacac;
+ }
+
+ .location{
+ font-size: 1.2vw;
+ }
+
+ @media screen and (max-width: 1164px){
+ .navbar{
+ width: 100%;
+ }
+ #eventContainer{
+ width: 95%;
+ margin: 0 auto;
+ }
+ .category{
+ width: 80%;
+ margin: 1em auto;
+ }
+
+ @media screen and (max-width: 793px){
+ .category{
+ text-align: center;
+ }
+ .categoryContainer{
+ display: grid;
+ grid-template-columns: repeat(auto-fit, 170px);
+ justify-content: center;
+ }
+ .event-item{
+ width: 170px;
+ }
+ .barContainer {
+ width: 80%;
+ margin: auto;
+ padding: 1em 0;
+ flex-direction: column;
+ }
+ }
+ }
\ No newline at end of file