event.html

<article id="page-event">
  <div class="sub-title">
    <img src="./image/title/event.png" alt="スタッフ紹介" class="staff_title">
  </div>

  <section class="button-event">
    <button type="button" id="button-game">
      <img src="image/event_title/class_event_button.png">
    </button>
    <button type="button" id="button-food">
      <img src="image/event_title/yatai_button.png">
    </button>
    <button type="button" id="button-others">
      <img src="image/event_title/event_button.png">
    </button>
    <button type="button" id="button-band">
      <img src="image/event_title/band_button.png">
    </button>
  </section>
  
  <details class="attention-event">
    <summary class="attention-toggle">高専祭の注意事項</summary>
    <div class="attention-list">
      <h4 class="attention-title">// 禁止事項</h4>
      <ul class="attention-text">
        <li>本館4階、学生寮は立ち入り禁止です。</li>
        <li>本校敷地内は全面禁酒・禁煙です。</li>
        <li>校舎内は飲食禁止です。飲食物は屋外でお召し上がりください。</li>
        <li>ごみのポイ捨てはご遠慮ください。</li>
      </ul>

      <h4 class="attention-title">// 屋台について</h4>
      <ul class="attention-text">
        <li>屋台では金券のみ使用可能です。</li>
        <li>金券は本部にて現金でご購入・ご返金いただけます。</li>
        <li>屋台でお並びの際は、危ないですので道路にはみ出さないでください。</li>
      </ul>
      
      <p>ご不明な点などございましたら、運営本部またはスーツを着用しているスタッフまでお気軽にお尋ねください。</p>
    </div>
  </details>

  <article id="list">
    <article id="list-game">
      <!-- 1階 -->
      <img class="subtitle-event" src="image/event/subtitle/first.png">
      <div class="cells">
        <div class="cell">
          <img src="image/event/class/game/4-mi.jpg">
          <div class="cell-text">
            <p class="cell-title">高専と千と千尋の神隠し</p>
            <p class="cell-grade">4年メディア 脱出ゲーム</p>
            <p class="cell-place">1-1、1-2講義室</p>
          </div>
        </div>
        <div class="cell">
          <img src="image/event/class/game/5-br.png">
          <div class="cell-text">
            <p class="cell-title">縁日</p>
            <p class="cell-grade">5年生物 縁日</p>
            <p class="cell-place">1-3、1-4講義室</p>
          </div>
        </div>
        <div class="cell">
          <img src="image/event/noimage_band.png">
          <div class="cell-text">
            <p class="cell-title">vvvv創造研究</p>
            <p class="cell-grade">有志団体 作品展示</p>
            <p class="cell-place">ネットワーク演習室</p>
          </div>
        </div>
      </div>

      <!-- 2階 -->
      <img class="subtitle-event" src="image/event/subtitle/second.png">
      <div class="cells">
        <div class="cell">
          <img src="image/event/class/game/2-3.jpg">
          <div class="cell-text">
            <p class="cell-title">お化け屋敷</p>
            <p class="cell-grade">2年3組 お化け屋敷</p>
            <p class="cell-place">2-6講義室</p>
          </div>
        </div>
        <div class="cell">
          <img src="image/event/class/game/3-ms.png">
          <div class="cell-text">
            <p class="cell-title">オモレンジャー</p>
            <p class="cell-grade">3年機械 映像作品</p>
            <p class="cell-place">2-4講義室</p>
          </div>
        </div>
        <div class="cell">
          <img src="image/event/class/game/3-br.png">
          <div class="cell-text">
            <p class="cell-title">Shall we dance?</p>
            <p class="cell-grade">3年生物 キャラクターハント</p>
            <p class="cell-place">2-3講義室</p>
          </div>
        </div>
        <div class="cell">
          <img src="image/event/class/game/5-mi.png">
          <div class="cell-text">
            <p class="cell-title">ボードゲーム</p>
            <p class="cell-grade">5年メディア ボードゲーム</p>
            <p class="cell-place">2-2講義室</p>
          </div>
        </div>
        <div class="cell">
          <img src="image/event/noimage_band.png">
          <div class="cell-text">
            <p class="cell-title">沖縄高専ボイスドラマProject「イオ」</p>
            <p class="cell-grade">有志団体 映像作品</p>
            <p class="cell-place">2-5講義室</p>
          </div>
        </div>
      </div>

      <!-- 3階 -->
      <img class="subtitle-event" src="image/event/subtitle/third.png">
      <div class="cell">
        <img src="image/event/class/game/1-1.png">
        <div class="cell-text">
          <p class="cell-title">縁日おいなりさん</p>
          <p class="cell-grade">1年1組 縁日</p>
          <p class="cell-place">3-3講義室</p>
        </div>
      </div>
      <div class="cell">
        <img src="image/event/class/game/1-4.1.png">
        <div class="cell-text">
          <p class="cell-title">恐怖の肝試し</p>
          <p class="cell-grade">1年4組 お化け屋敷</p>
          <p class="cell-place">3-4講義室</p>
        </div>
      </div>
      </div>
      <div class="cell">
        <img src="image/event/class/game/2-4.png">
        <div class="cell-text">
          <p class="cell-title">Carman Games</p>
          <p class="cell-grade">2年4組 ボードゲーム</p>
          <p class="cell-place">3-2講義室</p>
        </div>
      </div>
      <div class="cell">
        <img src="image/event/class/game/3-ic.png">
        <div class="cell-text">
          <p class="cell-title">オリジナル映像作品キャラハント</p>
          <p class="cell-grade">3年情報 映像作品・キャラクターハント</p>
          <p class="cell-place">3-1講義室</p>
        </div>
      </div>
      <div class="cell">
        <img src="image/event/class/game/4-ic.png">
        <div class="cell-text">
          <p class="cell-title">笑う准教授</p>
          <p class="cell-grade">4年情報 映像作品</p>
          <p class="cell-place">3-6講義室</p>
        </div>
      </div>
      <div class="cell">
        <img src="image/event/class/game/5-ic.png">
        <div class="cell-text">
          <p class="cell-title">映像作品</p>
          <p class="cell-grade">5年情報 映像作品</p>
          <p class="cell-place">3-5講義室</p>
        </div>
      </div>
      <div class="cell">
        <img src="image/event/noimage_band.png">
        <div class="cell-text">
          <p class="cell-title">総合美術部</p>
          <p class="cell-grade">有志団体 ポストカード販売</p>
          <p class="cell-place">3階ラウンジ</p>
        </div>
      </div>
      

      <!-- アリーナ -->
      <img class="subtitle-event" id="arina_subtitle" src="image/event/subtitle/arina_subtitle.png">
      <div class="cell">
        <img src="image/event/class/game/4-ms.png">
        <div class="cell-text">
          <p class="cell-title">前向きに</p>
          <p class="cell-grade">4年機械 劇</p>
          <p class="cell-place">体育館アリーナ 1日目:10:00～11:00 2日目:15:00～16:00</p>
        </div>
      </div>
      <div class="cell">
        <img src="image/event/class/game/4-br.png">
        <div class="cell-text">
          <p class="cell-title">いけたかも委員会</p>
          <p class="cell-grade">4年生物 劇</p>
          <p class="cell-place">体育館アリーナ 1日目:15:00～16:00 2日目:10:00～11:00</p>
        </div>
      </div>
      <div class="cell">
        <img src="image/event/class/game/5-ms.jpg">
        <div class="cell-text">
          <p class="cell-title">地下アイドル</p>
          <p class="cell-grade">5年機械 ???</p>
          <p class="cell-place">体育館アリーナ 1日目:11:30～12:00 2日目:13:00～13:30</p>
        </div>
      </div>
    </article>

    <article id="list-food">
      <!-- 1日目 -->
      <img class="subtitle-event" src="image/event/subtitle/day1.png">
      <div class="cell">
        <img src="image/event/class/food/1-2.png">
        <div class="cell-text">
          <p class="cell-title">森田屋</p>
          <p class="cell-grade">1年2組 タピオカドリンク</p>
          <p class="cell-place">夢工場前</p>
        </div>
      </div>
      <div class="cell">
        <img src="image/event/class/food/1-3.png">
        <div class="cell-text">
          <p class="cell-title">ベリーナファクトリー</p>
          <p class="cell-grade">1年3組 チュロス・ドリンク</p>
          <p class="cell-place">夢工場前</p>
        </div>
      </div>
      <div class="cell">
        <img src="image/event/class/food/2-1.png">
        <div class="cell-text">
          <p class="cell-title">スティック 山本</p>
          <p class="cell-grade">2年1組 フランクフルト・チョコバナナ</p>
          <p class="cell-place">夢工場前</p>
        </div>
      </div>
      <div class="cell">
        <img src="image/event/class/food/2-2.png">
        <div class="cell-text">
          <p class="cell-title">甘味処 ホルモン</p>
          <p class="cell-grade">2年2組 ポーポー・パンケーキ 他</p>
          <p class="cell-place">夢工場前</p>
        </div>
      </div>
      <div class="cell">
        <img src="image/event/class/food/3-mi.png">
        <div class="cell-text">
          <p class="cell-title">ひがぱんケーキ</p>
          <p class="cell-grade">3年メディア 2層ドリンク・アイス 他</p>
          <p class="cell-place">夢工場前</p>
        </div>
      </div>

      <!-- 2日目 -->
      <img class="subtitle-event" src="image/event/subtitle/day2.png">
      <div class="cell">
        <img src="image/event/noimage_yatai.png">
        <div class="cell-text">
          <p class="cell-title">旧高専祭</p>
          <p class="cell-grade">有志団体 やきそば・ポテト・からあげ</p>
          <p class="cell-place">夢工場前</p>
        </div>
      </div>
      <div class="cell">
        <img src="image/event/noimage_yatai.png">
        <div class="cell-text">
          <p class="cell-title">学生会</p>
          <p class="cell-grade">有志団体 フランクフルト・ポテト・からあげ</p>
          <p class="cell-place">夢工場前</p>
        </div>
      </div>
      <div class="cell">
        <img src="image/event/noimage_yatai.png">
        <div class="cell-text">
          <p class="cell-title">ゆうカフェ</p>
          <p class="cell-grade">有志団体 コーヒー・ワッフル・ラスク 他</p>
          <p class="cell-place">夢工場前</p>
        </div>
      </div>
      <div class="cell">
        <img src="image/event/noimage_yatai.png">
        <div class="cell-text">
          <p class="cell-title">男女ハンド部</p>
          <p class="cell-grade">有志団体 たこやき・ポップコーン</p>
          <p class="cell-place">夢工場前</p>
        </div>
      </div>
      <div class="cell">
        <img src="image/event/noimage_yatai.png">
        <div class="cell-text">
          <p class="cell-title">WSB</p>
          <p class="cell-grade">有志団体 ナン＆カレー・タンドリーチキン 他</p>
          <p class="cell-place">夢工場前</p>
        </div>
      </div>
    </article>

    <article id="list-others">
      <!-- 1日目 -->
      <img class="subtitle-event" src="image/event/subtitle/day1.png">
      <div class="cell">
        <img src="image/event/others/marubatsu.png">
        <div class="cell-text">
          <p class="cell-title">○×ゲーム</p>
          <p class="cell-grade">
            君はどれだけ答えられる！？<br>
            エリア移動型の○×クイズ。<br>
            上位３名には豪華な景品が！参加賞もあるよ！<br>
          </p>
          <p class="cell-place">体育館アリーナ 13:00～14:00</p>
        </div>
      </div>
      <div class="cell">
        <img src="image/event/others/smash.png">
        <div class="cell-text">
          <p class="cell-title">沖縄高専スマブラ王は俺だ！</p>
          <p class="cell-grade">
            昔から愛されてきたゲームの王道<br>
            「大乱闘スマッシュブラザーズ」！！<br>
            大会とフリープレイがあるよ！<br>
            大会優勝者には豪華景品が！<br>
          </p>
          <p class="cell-place">3階設計演習室 10:00～15:30</p>
        </div>
      </div>
      
      <!-- 2日目 -->
      <img class="subtitle-event" src="image/event/subtitle/day2.png">
      <div class="cell">
        <img src="image/event/others/sweet.png">
        <div class="cell-text">
          <p class="cell-title">男女合同！スイーツ早食い大会</p>
          <p class="cell-grade">
            沖縄スイーツを誰よりも早く食べつくせ！<br>
            今までにない、男女合同の早食い大会。<br>
            勝ち上がるのは誰だ・・！<br>
          </p>
          <p class="cell-place">創造実践棟1階吹き抜け 13:30～15:00</p>
        </div>
      </div>

      <!-- 終日 -->
      <img class="subtitle-event" src="image/event/subtitle/day.png">
      <div class="cell">
        <img src="image/event/others/stamp.png">
        <div class="cell-text">
          <p class="cell-title">スタンプラリー</p>
          <p class="cell-grade">
            集めろ！スタンプラリー！！<br>
            あなたはすべてのイベントを制覇できるかな・・・？<br>
          </p>
          <p class="cell-place">2階ITラウンジ</p>
        </div>
      </div>
      <div class="cell">
        <img src="image/event/others/jidori.png">
        <div class="cell-text">
          <p class="cell-title">
            あなたはどれだけ盛れる？<br>
            自撮りコンテスト！
          </p>
          <p class="cell-grade">
            現代において最も身近なスマートフォンを使い、<br>
            高専生が自撮り技術の本気を見せた<br>
            奇跡の1枚、ぜひご覧ください。投票もよろしくね！！<br>
          </p>
          <p class="cell-place">2階ITラウンジ</p>
        </div>
      </div>
      <div class="cell">
        <img src="image/event/others/jinja.png">
        <div class="cell-text">
          <p class="cell-title">高専神社</p>
          <p class="cell-grade">
            沖縄高専の神がいると言い伝えられてきた、<br>
            2日限定の神社が今年も開催！
          </p>
          <p class="cell-place">2階東階段登って正面</p>
        </div>
      </div>
    </article>
<!--バンド-->
    <article id="list-band">
  <!--1日目-->
      <img class="subtitle-event" src="image/event/subtitle/day1.png">
    <!--くず-->
      <div class="cell">
        <img src="image/event/volunteer/stilt/kuzu.jpg">
        <div class="cell-text">
          <p class="cell-title">くず</p>
          <p class="cell-grade">バンド</p>
          <p class="cell-place">ピロティ 10:00～10:20</p>
        </div>
      </div>
    <!--バンドし隊-->
      <div class="cell">
        <img src="image/event/noimage_band.png">
        <div class="cell-text">
          <p class="cell-title">バンドし隊</p>
          <p class="cell-grade">バンド</p>
          <p class="cell-place">ピロティ 10:20～10:40</p>
        </div>
      </div>
    <!--the bad appo-->
      <div class="cell">
        <img src="image/event/volunteer/stilt/the_bad_appointment.jpg">
        <div class="cell-text">
          <p class="cell-title">The bad appointment</p>
          <p class="cell-grade">バンド</p>
          <p class="cell-place">ピロティ 10:40～11:00</p>
        </div>
      </div>
    <!--講義室2-x-->
      <div class="cell">
        <img src="image/event/noimage_band.png">
        <div class="cell-text">
          <p class="cell-title">講義室2-x</p>
          <p class="cell-grade">バンド</p>
          <p class="cell-place">ピロティ 11:00～11:40</p>
        </div>
      </div>

    <!--楽器部-->
      <div class="cell">
        <img src="image/event/volunteer/stilt/gakkibu.jpg">
        <div class="cell-text">
          <p class="cell-title">楽器部</p>
          <p class="cell-grade">バンド</p>
          <p class="cell-place">ピロティ 11:40～12:00</p>
        </div>
      </div>
    <!--チンアナゴ-->
      <div class="cell">
        <img src="image/event/volunteer/stilt/chin_ana_go.jpg">
        <div class="cell-text">
          <p class="cell-title">チンアナ・ゴー</p>
          <p class="cell-grade">バンド</p>
          <p class="cell-place">ピロティ 13:00～13:20</p>
        </div>
      </div>
    <!--limit-->
      <div class="cell">
        <img src="image/event/volunteer/stilt/limit.jpg">
        <div class="cell-text">
          <p class="cell-title">limit</p>
          <p class="cell-grade">バンド</p>
          <p class="cell-place">ピロティ 13:20～13:40</p>
        </div>
      </div>
    <!--ZENZA BOYS-->
      <div class="cell">
        <img src="image/event/volunteer/stilt/zenda_boys.jpg">
        <div class="cell-text">
          <p class="cell-title">ZENZA BOYS</p>
          <p class="cell-grade">バンド</p>
          <p class="cell-place">ピロティ 13:40～14:00</p>
        </div>
      </div>
    <!--教員有志C-->
      <div class="cell">
        <img src="image/event/volunteer/stilt/kyo_in_yushi_c.jpg">
        <div class="cell-text">
          <p class="cell-title">教員有志©</p>
          <p class="cell-grade">バンド</p>
          <p class="cell-place">ピロティ 14:00～14:20</p>
        </div>
      </div>
    <!--ハイスタ-->
      <div class="cell">
        <img src="image/event/volunteer/stilt/haisuta_shiyousa.jpg">
        <div class="cell-text">
          <p class="cell-title">ハイスタしようさ</p>
          <p class="cell-grade">バンド</p>
          <p class="cell-place">ピロティ 14:20～14:40</p>
        </div>
      </div>
    <!--えのき-->
      <div class="cell">
        <img src="image/event/volunteer/stilt/enoki_teikoku.jpg">
        <div class="cell-text">
          <p class="cell-title">えのき帝国</p>
          <p class="cell-grade">バンド</p>
          <p class="cell-place">ピロティ 14:40～15:00</p>
        </div>
      </div>
    <!--教員有志B-->
      <div class="cell">
        <img src="image/event/volunteer/stilt/kyo_in_yushi_b.jpg">
        <div class="cell-text">
          <p class="cell-title">教員有志B</p>
          <p class="cell-grade">バンド</p>
          <p class="cell-place">ピロティ 15:00～15:30</p>
        </div>
      </div>
    <!--サテライトガレイ-->
      <div class="cell">
        <img src="image/event/volunteer/stilt/satelight.png">
        <div class="cell-text">
          <p class="cell-title">サテライトガレイ</p>
          <p class="cell-grade">バンド</p>
          <p class="cell-place">ピロティ 15:30～16:00</p>
        </div>
      </div>
    <!--千本桜-->
      <div class="cell">
        <img src="image/event/volunteer/arena/artist_image/senbonzakura.png">
        <div class="cell-text">
          <p class="cell-title">千本桜</p>
          <p class="cell-grade">コピーユニット</p>
          <p class="cell-place">体育館アリーナ 14:00～14:30</p>
        </div>
      </div>

  <!--2日目-->
      <img class="subtitle-event" src="image/event/subtitle/day2.png">
    <!--スイッチ-->
      <div class="cell">
        <img src="image/event/volunteer/stilt/switch.jpg">
        <div class="cell-text">
          <p class="cell-title">スイッチ</p>
          <p class="cell-grade">バンド</p>
          <p class="cell-place">ピロティ 10:00～10:20</p>
        </div>
      </div>
    <!--黒歴史-->
      <div class="cell">
        <img src="image/event/volunteer/stilt/kurorekishi.png">
        <div class="cell-text">
          <p class="cell-title">黒歴史</p>
          <p class="cell-grade">バンド</p>
          <p class="cell-place">ピロティ 10:20～10:40</p>
        </div>
      </div>
    <!--ハイスペックニート-->
      <div class="cell">
        <img src="image/event/volunteer/stilt/high_spec_neet.jpg">
        <div class="cell-text">
          <p class="cell-title">ハイスペックニート</p>
          <p class="cell-grade">バンド</p>
          <p class="cell-place">ピロティ 10:40～11:00</p>
        </div>
      </div>
    <!--T.drops-->
      <div class="cell">
        <img src="image/event/volunteer/stilt/t_drops.jpg">
        <div class="cell-text">
          <p class="cell-title">T.drops</p>
          <p class="cell-grade">バンド</p>
          <p class="cell-place">ピロティ 11:00～11:30</p>
        </div>
      </div>
    <!--ダレノガレイ-->
      <div class="cell">
        <img src="image/event/volunteer/stilt/dareno_garei.jpg">
        <div class="cell-text">
          <p class="cell-title">ダレノガレイ</p>
          <p class="cell-grade">バンド</p>
          <p class="cell-place">ピロティ 11:30～12:00</p>
        </div>
      </div>
    <!--KURUCKS-->
      <div class="cell">
        <img src="image/event/volunteer/stilt/kurucks.jpg">
        <div class="cell-text">
          <p class="cell-title">KURUCKS</p>
          <p class="cell-grade">バンド</p>
          <p class="cell-place">ピロティ 13:00～13:20</p>
        </div>
      </div>
    <!--ラルクのコピバン-->
      <div class="cell">
        <img src="image/event/volunteer/stilt/larc_no_copy_band.jpg">
        <div class="cell-text">
          <p class="cell-title">ラルクのコピバン</p>
          <p class="cell-grade">バンド</p>
          <p class="cell-place">ピロティ 13:20～13:40</p>
        </div>
      </div>
    <!--深海タートルズ-->
      <div class="cell">
        <img src="image/event/volunteer/stilt/shinkai_turtles.png">
        <div class="cell-text">
          <p class="cell-title">深海タートルズ</p>
          <p class="cell-grade">バンド</p>
          <p class="cell-place">ピロティ 13:40～14:00</p>
        </div>
      </div>
    <!--胡椒-->
      <div class="cell">
        <img src="image/event/volunteer/stilt/kosho_takusho.jpg">
        <div class="cell-text">
          <p class="cell-title">胡椒匠翔</p>
          <p class="cell-grade">バンド</p>
          <p class="cell-place">ピロティ 14:00～14:30</p>
        </div>
      </div>
    <!--眞榮田-->
      <div class="cell">
        <img src="image/event/volunteer/stilt/maeda.jpg">
        <div class="cell-text">
          <p class="cell-title">眞榮田大和</p>
          <p class="cell-grade">バンド</p>
          <p class="cell-place">ピロティ 14:30～15:00</p>
        </div>
      </div>
    <!--ブラックサンダー-->
      <div class="cell">
        <img src="image/event/volunteer/stilt/black_thunder.png">
        <div class="cell-text">
          <p class="cell-title">ブラックサンダー</p>
          <p class="cell-grade">バンド</p>
          <p class="cell-place">ピロティ 15:00～15:20</p>
        </div>
      </div>
    <!--234-->
      <div class="cell">
        <img src="image/event/volunteer/stilt/234.png">
        <div class="cell-text">
          <p class="cell-title">234</p>
          <p class="cell-grade">バンド</p>
          <p class="cell-place">ピロティ 15:20～15:40</p>
        </div>
      </div>
    <!--The olders-->
      <div class="cell">
        <img src="image/event/volunteer/stilt/the_olders.jpg">
        <div class="cell-text">
          <p class="cell-title">The olders</p>
          <p class="cell-grade">バンド</p>
          <p class="cell-place">ピロティ 15:40～16:00</p>
        </div>
      </div>
    <!--お好みやっち-->
      <div class="cell">
        <img src="image/event/volunteer/arena/artist_image/okonomiyacchi.png">
        <div class="cell-text">
          <p class="cell-title">お好みやっち</p>
          <p class="cell-grade">コピーユニット</p>
          <p class="cell-place">体育館アリーナ 11:30～12:00</p>
        </div>
      </div>
    <!--ダンス部-->
      <div class="cell">
        <img src="image/event/volunteer/arena/artist_image/dancebu.jpeg">
        <div class="cell-text">
          <p class="cell-title">ダンス部</p>
          <p class="cell-grade">ダンス</p>
          <p class="cell-place">体育館アリーナ 13:30～14:00</p>
        </div>
      </div>
    <!--viviana-->
      <div class="cell">
        <img src="image/event/volunteer/arena/artist_image/viviana.jpeg">
        <div class="cell-text">
          <p class="cell-title">viviana</p>
          <p class="cell-grade">コピーユニット</p>
          <p class="cell-place">体育館アリーナ 14:00～14:30</p>
        </div>
      </div>
    </article>
  </article>
</article>