<!--
                                                          ..
                     .(<:<w,
                    (:<<?+uw                                                           ...~<<z-
                  .GwXkAaduw-                                                      .,<<(<;;+wrrl
                 .ZZWpbkkMMz)                                                  ..?<+<++???juuzrZ.
                .uZVpbkkHHMu]                                               ..XAAa&zzlllldZZuuur)
               .UZypbkqHM#Nu[                                            .-yyWppbbkkkHkgXyZZZXSv\
               wuyfpkkqM###X}                                         ..yXVfppbbkkkkqHM##NkyWWUZ`
              (uZypbkqH##HSV                                        .dyyVppbbbkkkkqHMNN##MyWHXX\
             .zuyVpkkH####Z\                                      .WyVfpppbbkkkkkHMNNNNNNWWWZX\
             wuuyfbkHM##HS2                                    ..ZyVfppbbkkkkkqHMNNNNMMHKWWuX^
            ,vuZypbHM#HH#V                                   .(uZyfppbbkkkkkHNMNNNMNMMWMHSuv`
            wvuZVpWMHHH@@`                                  ,uZZVfpbbkkkkkHMNNNNNMNMHWMHXz^
           .w!~<jHHHH@@#`                                 ,XuZyVfpbkkkkHNNNNNMNMMMHpWWXu=
           (r` JwHH@@@@`       `  `  `  `  `  `  `  `   .!```?4WbkkkqHMNNNNMNNMMHfWWXV=
           w` (=d@@@@f                                 _` ``-(jHkkHMNNNNNNMNMMHVWXXv!
    `  `   C (?=W@gg%                                .!`  .JuWkHM#NNNNNMMMMHfWWZV=
          .{.;>1qqH^     ....___~~~~~_`....         , ` .?zdNM##NNNNNNMNNfWWZ0=`               `
          .!(;>+4f`..``  .~``............wZZZSs-.  ~  .>?udHH###NNNNNNNMMXV=`
   `       (;;>+v_  `  ,~``....~~~~~~~((HVVyVyZuuw\ .;>?ug@HH#H####MMMMY^                   `    `
      `    (>+?````` ``.__~<<<<<<((JxwqNppppfyZuX% (>>?d@@HHHH@@MMMY"`                   `
           .I.JJJJJJ---_~~__(~::::::;:?TYWWpfVyHF`,??=z@@HH@@g#Y=`                   `
          .MNNMNNMMNMMMMMMMMNgJgv1++:::;::::?XWM>-=lztrdHMM"!                                 `
        `.MMMMMMMMMMMMMMMMMMMMMMMMNagZw&+;++XNpMNggNN@4pppVS,
        -MM@!UMMMMMMMMMMMMMMMMMMMMMMMMNpOuuudHppHMMMB<<HppVXX,
       .MMMNgMMMMMMMMMMMMM[ ,MMMMMMMMMM$duuqMbbbpbHm+++bWNM#dg,
      .#NMMMMMMMMMMMMMMMMMMMMMMMMMMMMM8JuuXMNWMNbbbbbbWNMjTMJMH,
      .NHNMMMMMMMMMMMMMMMMMMMMMMMMMMM8JuuXMMHdMMbbbbbWMTMygdNMHN
      <dH#MMMMMNaJNMMMMMMMKNNMMMMMM#1duuQMMH6JMbbbbbWMdWxNMHWMHg[　　　　　　　　　　　　　
     ..JH#NMMMMMMMMMMMMMMMMMMMMMMM5(uuuqHMHW+dbbbbbkMsTmgMkqH#MgH                        
     .`<dHNMMMMMMMMMMMMMMMMMMMMM".uuuXdHMHbpbbbbbbbMNxHNNkqH##HHm;　　　　　　　　　　　　　
     ...-4NMMMMMMMMMMMMMMMMMMM".uuuuqHHMbbbbbbbbbbkM#8MMWqqMMMMHm]　　　　　　　　　　　　　
     ,[`( WMMMMMMMMMMMMMMMMB!.uuuuQHHMNbbbbbbbbbbkkMMMM#dqMNMMM@g]　　　　　　　　　　　　　
     .X..- WMMMMMMMMMMMM#".JuuuuQHHHMbbbbbbbbbbkkkkM$XMNdHNNNMM@m\　　　　　　　　　　　　　
      Sn..< UMMMMMMMM#5(JuuuuuQHHHMbpbbbbbbbbbkkkkkMMMMMHMNNNMM@m`　　　　　　　　　　　　　
      (un..(.?MMM#5<+dUuuuuXQMHHMHbbbbbbbbbkkkkkkkkMMqd#MNNNNH@gP　　　　　　　　　　　　　　
       Uun~~(++++yXuuuuuuQHHHHMHbbbbbbbbbbkkkkkkkqqqMNqMWMMMMMgH!　　　　　　　　　　　　　　　　　
       ,XZh-~(zuuuuuuuQgHHHMMbpbbbbbbbbbkkW3dkkqqqqqNMM#s5dMMgq%　　　　　　　　　　　　　　　
        (ZZW,(zuuuuQkHHHHMHbbbbbbbbbbkkkkk2;>WqqqqNMNNMNMMMMgm%
         jZyWnwQgMHHHHMMbbbbbbbbbbkkUWkkkkkJ+uWNNMNNMNNNMMHHk%
          ?yyWWMMMMMMHHkbbbbbbkkkD<;;>WkqqqqyVfWMNMNMMMMMHkK'
           .XyVpkkqqqHMMNkkkkkkkkb;>>>>WHqHNMNkkqmMMMMMHHK=
             UXVpkqqqHMMMNHkkkkkkH2>juXVdMNMNNMMNHmHHWW0^
             .XXWbkqmmMMMMMNNqqqqqqyVVfpppHMMNNMNMMMHY!
              (uXWkqmggMMMMMMMNNNMNNNpppbkqmHMMNMMMK
               ,XkWHHHHMMMMMMMMNNMMNNMNHqqmgHNNMMM#!
                .UMMNMMMMMMMMMMMMMNNNH@HHNNMMMMMMY
                  ?MMNMMMMNMMMMMMMMMMMMMMMMMMMMB'
                    ?H#NMMMMNMMMMMMMMMMMNMMM#"`
                       7WMMMMMMMMMMMNMMMB"!
                            ?7""""""^`

                            開発者モードを開いた新入生の皆さん、入学おめでとうございます！
                            旭祭実行委員会ウェブサイトの中の人です！
                            中の人は現在、三年生一名、二年生三名で活動しています！
                            web担当の主な仕事は新入生歓迎用と本祭用とで2回webサイトを作ることです。
                            また、今年は位置情報とARを用いたオリジナルスタンプラリー企画の開発も行っています(今のところ…)
                            そこで、プログラミングが出来る人を募集中です！
                            また、初心者でもやる気、興味がある人大歓迎です。我々は全員が初心者でした！
                            少しでも気になった人はぜひ連絡してください！
                            web担当mail: asahisai.web@gmail.com

                            追伸
                            4/5のオリエンテーション当日は旭祭のブースに出没します。開発者モードを見たとお伝えください。
-->     

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" type="image/ico" href="https://www.sg.dendai.ac.jp/s1j-asahisai/images/asahi.ico">

    <title>第14回旭祭実行委員会_新入生歓迎サイト</title>
    <!-- BootstrapのCSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://kit.fontawesome.com/cb1e427f8e.js" crossorigin="anonymous"></script>
    <meta name="twitter:site" content="@asahisai">
    <link rel="stylesheet" href="css/style.css">
    <!--SEO-->
    <meta property="og:image" content="https://www.sg.dendai.ac.jp/s1j-asahisai/archives/14th/newStudents/images/sinkantop.png" />
    <meta name="twitter:card" content="summary_large_image">
    <meta name="description" content="東京電機大学東京千住キャンパス学園祭　旭祭実行委員会の新入生歓迎会用ウェブサイトです">
    <meta property="og:title" content="旭祭実行委員会 | 東京電機大学東京千住キャンパス | 新入生歓迎会">
    <meta property="og:url" content="http://www.sg.dendai.ac.jp/s1j-asahisai/index.html">
    <meta property="og:type" content="website">
    <meta property="og:site_name" content="第14回東京電機大学旭祭実行委員会">
    <META name="keywords" content="旭祭,東京電機大学,電大,tdu,東京電機大学学園祭,学園祭,東京千住キャンパス,新入生歓迎会,新歓,サークル勧誘会,部活動,">

    <script>
        (function (d) {
            var config = {
                kitId: 'csm6klw',
                scriptTimeout: 3000,
                async: true
            },
                h = d.documentElement, t = setTimeout(function () { h.className = h.className.replace(/\bwf-loading\b/g, "") + " wf-inactive"; }, config.scriptTimeout), tk = d.createElement("script"), f = false, s = d.getElementsByTagName("script")[0], a; h.className += " wf-loading"; tk.src = 'https://use.typekit.net/' + config.kitId + '.js'; tk.async = true; tk.onload = tk.onreadystatechange = function () { a = this.readyState; if (f || a && a != "complete" && a != "loaded") return; f = true; clearTimeout(t); try { Typekit.load(config) } catch (e) { } }; s.parentNode.insertBefore(tk, s)
        })(document);
    </script>
    <!--google tag-->
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-47C8XLB4N6"></script>
    <script>
        window.dataLayer = window.dataLayer || [];
        function gtag() { dataLayer.push(arguments); }
        gtag('js', new Date());

        gtag('config', 'G-47C8XLB4N6');
    </script>
</head>

<body class="FOT-Tsuku-R">

    <!-- ナビゲーションバー -->
    <nav class="navbar navbar-expand-md navbar-dark">
        <div class="container-fluid">
            <!-- ロゴ -->
            <a class="navbar-brand" href="#"> <img src="images/asahisailogo.png" alt="旭祭ロゴ"
                    style="height:40px; max-width :250px;"></a>
            <!-- トグルボタン -->
            <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar"
                aria-controls="offcanvasNavbar" aria-expanded="false" aria-label="ナビゲーションの切り替え">
                <span class="navbar-toggler-icon"></span>
            </button>
            <!-- ナビゲーションメニュー -->
            <div class="collapse navbar-collapse FOT-Tsuku-R" id="navbarNav">
                <ul class="navbar-nav ms-auto">
                    <li class="nav-item">
                        <a class="nav-link  ms-3 my-2" href="#greeting">挨拶</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link ms-3 my-2" href="#depart">局紹介</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link ms-3 my-2" href="#event">イベント</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link  ms-3 my-2" href="#about">第13回旭祭</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link  ms-3 my-2" href="#enter">入会案内</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasNavbar" aria-labelledby="offcanvasNavbarLabel">
        <div class="offcanvas-header">
            <h5 class="offcanvas-title" id="offcanvasNavbarLabel">メニュー</h5>
            <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas"
                aria-label="閉じる"></button>
        </div>
        <div class="offcanvas-body">
            <ul class="navbar-nav">
                <li class="nav-item" data-bs-dismiss="offcanvas">
                    <a class="nav-link" href="#greeting">挨拶</a>
                </li>
                <li class="nav-item" data-bs-dismiss="offcanvas">
                    <a class="nav-link" href="#depart">局紹介</a>
                </li>
                <li class="nav-item" data-bs-dismiss="offcanvas">
                    <a class="nav-link" href="#event">イベント</a>
                </li>
                <li class="nav-item" data-bs-dismiss="offcanvas">
                    <a class="nav-link" href="#about">第13回旭祭</a>
                </li>
                <li class="nav-item" data-bs-dismiss="offcanvas">
                    <a class="nav-link" href="#enter">入会案内</a>
                </li>
                <!-- <li class="nav-item" data-bs-dismiss="offcanvas">
                    <a class="nav-link  ms-3 my-2" href="#miniGame" href="game.html">ミニゲーム</a>
                </li> -->
            </ul>
        </div>
    </div>
    <!-- 挨拶-->

    <div class=" mb-15 text-center greetingM">
        <div class="container align-items-center">
            <div class="row p-md-5 justify-content-center">
                <div class="col-12">
                    <img src="images/omedetou.svg" class="p-md-5 img-fluid">
                </div>
            </div>
            <div class="row justify-content-center">
                <div class="col-md-10">
                    <img src="images/kuruton.png" class="kurutonsize">
                </div>
            </div>
        </div>
        <div id="greeting"></div>
    </div>

    <div class="AR">
        <a href="./AR/"><img class="ARimg" src="images/ARbutton.svg"></a>
        <br><a href="./AR/">こちら</a>からARクルトンが見れます。
    </div>
    

    <!-- 局紹介 -->
    <div class="mt-24 mb-15 text-center">
        <div class="title-frame mx-auto px-2">
            <div class="title">ご挨拶</div>
            <p class="text">こんにちは、旭祭実行委員会です！<br>
                私たちは東京電機大学の学園祭「旭祭」の企画・運営を行っています。<br>
                ぜひ私たちと一緒に学園を盛り上げませんか？</p>
        </div>
        <div class="container mt-5">
            <div class="profile-wrapper">
                <!-- 人物 1 -->
                <div class="profile-item" data-bs-toggle="modal" data-bs-target="#modal1">
                    <div class="profile-container">
                        <img src="images/picture/1pre.jpeg" class="profile-img" alt="１部委員長">
                    </div>
                    <div class="profile-text">委員長</div>
                </div>



                <!-- 人物 3 -->
                <div class="profile-item" data-bs-toggle="modal" data-bs-target="#modal3">
                    <div class="profile-container">
                        <img src="images/picture/1subpre.jpeg" class="profile-img" alt="１部副委員長">
                    </div>
                    <div class="profile-text">副委員長</div>
                </div>

                <!-- 人物 2 -->
                <div class="profile-item" data-bs-toggle="modal" data-bs-target="#modal2">
                    <div class="profile-container">
                        <img src="images/picture/2pre.jpg" class="profile-img" alt="２部委員長">
                    </div>
                    <div class="profile-text">二部委員長</div>
                </div>

                <!-- 人物 4 -->
                <div class="profile-item" data-bs-toggle="modal" data-bs-target="#modal4">
                    <div class="profile-container">
                        <img src="images/picture/2subpre1.jpeg" class="profile-img" alt="２部副委員長Ⅰ">
                    </div>
                    <div class="profile-text">二部副委員長Ⅰ</div>
                </div>

                <!-- 人物 5 -->
                <div class="profile-item" data-bs-toggle="modal" data-bs-target="#modal5">
                    <div class="profile-container">
                        <img src="images/picture/2subpre2.jpg" class="profile-img" alt="２部副委員長Ⅱ">
                    </div>
                    <div class="profile-text">二部副委員長Ⅱ</div>
                </div>
            </div>
            <div id="depart"></div>
        </div>

        <!-- １部委員長 -->
        <div class="modal fade" id="modal1" tabindex="-1" aria-labelledby="modalTitle" aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <button type="button" class="btn-close-custom" data-bs-dismiss="modal" aria-label="Close">
                        <svg xmlns="http://www.w3.org/2000/svg" height="38" width="38"
                            viewBox="0 0 512 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.-->
                            <path fill="#e27ca9"
                                d="M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM175 175c-9.4 9.4-9.4 24.6 0 33.9l47 47-47 47c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l47-47 47 47c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-47-47 47-47c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-47 47-47-47c-9.4-9.4-24.6-9.4-33.9 0z" />
                        </svg>
                        <path d="M6 6L18 18M6 18L18 6" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                            stroke-linejoin="round" />
                        </svg>
                    </button>
                    <!-- ボディ -->
                    <div class="modal-body row align-items-center">
                        <!-- タイトル + 本文（左側）-->
                        <div class="col-md-6 text-left">
                            <div class="title">委員長</div>
                            <p class="modal-text">　第14回旭祭実行委員会委員長の後藤滉貴です。
                                11月に開催される旭祭に向けて委員会メンバーと協力して活動しています。
                                旭祭実行委員会の所属数は大学で一番多いです！先輩、後輩と仲良くなりたい、
                                友達をたくさん作りたい人も大歓迎です！夏合宿や冬合宿などのイベントもあります！
                                大学生活で思い出を作りたい人はぜひ「旭祭実行委員会」に来てください！</p>
                        </div>
                        <!-- 画像（右側）-->
                        <div class="col-md-6 text-center">
                            <img src="images/picture/1pre.jpeg" class="img-fluid modal-img" alt="１部委員長">
                        </div>
                    </div>
                    <!-- <button type="button" class="btn-close-custom-2" data-bs-dismiss="modal" aria-label="Close">
                        <svg xmlns="http://www.w3.org/2000/svg" height="38" width="38"
                            viewBox="0 0 512 512">!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--
                            <path fill="#e27ca9"
                                d="M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM175 175c-9.4 9.4-9.4 24.6 0 33.9l47 47-47 47c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l47-47 47 47c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-47-47 47-47c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-47 47-47-47c-9.4-9.4-24.6-9.4-33.9 0z" />
                        </svg>
                        <path d="M6 6L18 18M6 18L18 6" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                            stroke-linejoin="round" />
                        </svg>
                    </button> -->
                </div>
            </div>
        </div>

        <!-- ２部委員長 -->
        <div class="modal fade" id="modal2" tabindex="-1" aria-labelledby="modalTitle" aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <button type="button" class="btn-close-custom" data-bs-dismiss="modal" aria-label="Close">
                        <svg xmlns="http://www.w3.org/2000/svg" height="38" width="38"
                            viewBox="0 0 512 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.-->
                            <path fill="#e27ca9"
                                d="M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM175 175c-9.4 9.4-9.4 24.6 0 33.9l47 47-47 47c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l47-47 47 47c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-47-47 47-47c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-47 47-47-47c-9.4-9.4-24.6-9.4-33.9 0z" />
                        </svg>
                        <path d="M6 6L18 18M6 18L18 6" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                            stroke-linejoin="round" />
                        </svg>
                    </button>
                    <!-- ボディ -->
                    <div class="modal-body row align-items-center">
                        <!-- タイトル + 本文（左側）-->
                        <div class="col-md-6 text-left">
                            <div class="title">二部委員長</div>
                            <p class="modal-text">　第14回二部旭祭実行委員会委員長の津久井来夢です。
                                旭祭実行委員会は一部の人とも関わりを持ちながら活動していくので、
                                一部の人と関わってみたい人がいたら大歓迎です。また、そうでない人にとっても、旭祭はとても大きなイベントです！
                                その運営にかかわってみませんか？イベントごとが好きな人、友達を作りたい人など色々な目的の人を求めているのでぜひ参加してください！</p>
                        </div>
                        <!-- 画像（右側）-->
                        <div class="col-md-6 text-center">
                            <img src="images/picture/2pre.jpg" class="img-fluid modal-img" alt="２部委員長">
                        </div>
                    </div>
                    <!-- <button type="button" class="btn-close-custom-2" data-bs-dismiss="modal" aria-label="Close">
                        <svg xmlns="http://www.w3.org/2000/svg" height="38" width="38"
                            viewBox="0 0 512 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--
                            <path fill="#e27ca9"
                                d="M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM175 175c-9.4 9.4-9.4 24.6 0 33.9l47 47-47 47c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l47-47 47 47c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-47-47 47-47c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-47 47-47-47c-9.4-9.4-24.6-9.4-33.9 0z" />
                        </svg>
                        <path d="M6 6L18 18M6 18L18 6" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                            stroke-linejoin="round" />
                        </svg>
                    </button> -->
                </div>
            </div>
        </div>

        <!-- １部副委員長 -->
        <div class="modal fade" id="modal3" tabindex="-1" aria-labelledby="modalTitle" aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <button type="button" class="btn-close-custom" data-bs-dismiss="modal" aria-label="Close">
                        <svg xmlns="http://www.w3.org/2000/svg" height="38" width="38"
                            viewBox="0 0 512 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.-->
                            <path fill="#e27ca9"
                                d="M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM175 175c-9.4 9.4-9.4 24.6 0 33.9l47 47-47 47c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l47-47 47 47c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-47-47 47-47c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-47 47-47-47c-9.4-9.4-24.6-9.4-33.9 0z" />
                        </svg>
                        <path d="M6 6L18 18M6 18L18 6" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                            stroke-linejoin="round" />
                        </svg>
                    </button>
                    <!-- ボディ -->
                    <div class="modal-body row align-items-center">
                        <!-- タイトル + 本文（左側）-->
                        <div class="col-md-6 text-left">
                            <div class="title">副委員長</div>
                            <p class="modal-text">　第14回旭祭実行委員会副委員長の佐々木愛彩です。
                                旭祭は四つの局に別れてそれぞれの活動を進めていきますが、様々なイベントを通じて局を問わず多くの人と関わる機会があります。
                                友達を作りたい人やイベントを楽しみたい人、仲間と一緒に何かを成し遂げたいという人も、是非旭祭実行委員会に入って、私達と一緒に楽しい思い出を作りましょう！</p>
                        </div>
                        <!-- 画像（右側）-->
                        <div class="col-md-6 text-center">
                            <img src="images/picture/1subpre.jpeg" class="img-fluid modal-img" alt="１部副委員長">
                        </div>
                    </div>
                    <!-- <button type="button" class="btn-close-custom-2" data-bs-dismiss="modal" aria-label="Close">
                        <svg xmlns="http://www.w3.org/2000/svg" height="38" width="38"
                            viewBox="0 0 512 512">!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--
                            <path fill="#e27ca9"
                                d="M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM175 175c-9.4 9.4-9.4 24.6 0 33.9l47 47-47 47c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l47-47 47 47c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-47-47 47-47c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-47 47-47-47c-9.4-9.4-24.6-9.4-33.9 0z" />
                        </svg>
                        <path d="M6 6L18 18M6 18L18 6" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                            stroke-linejoin="round" />
                        </svg>
                    </button> -->
                </div>
            </div>
        </div>

        <!-- モーダル本体 -->
        <div class="modal fade" id="modal4" tabindex="-1" aria-labelledby="modalTitle" aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <button type="button" class="btn-close-custom" data-bs-dismiss="modal" aria-label="Close">
                        <svg xmlns="http://www.w3.org/2000/svg" height="38" width="38"
                            viewBox="0 0 512 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.-->
                            <path fill="#e27ca9"
                                d="M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM175 175c-9.4 9.4-9.4 24.6 0 33.9l47 47-47 47c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l47-47 47 47c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-47-47 47-47c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-47 47-47-47c-9.4-9.4-24.6-9.4-33.9 0z" />
                        </svg>
                        <path d="M6 6L18 18M6 18L18 6" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                            stroke-linejoin="round" />
                        </svg>
                    </button>
                    <!-- ボディ -->
                    <div class="modal-body row align-items-center">
                        <!-- タイトル + 本文（左側）-->
                        <div class="col-md-6 text-left">
                            <div class="title">二部副委員長Ⅰ</div>
                            <p class="modal-text">　第14回二部鳩祭実行員会副委員長の浦邊滋音です。旭祭は多くの人が関わる年に一度のイベントです。
                                私たちはイベントの企画、広報、当日の運営まで、メンバー全員が協力し合うことで最高の旭祭を作り上げています。
                                皆さんのアイデアと力が、旭祭を成功に導く大きな原動力です。一緒に楽しい旭祭を作り上げませんか？</p>
                        </div>
                        <!-- 画像（右側）-->
                        <div class="col-md-6 text-center">
                            <img src="images/picture/2subpre1.jpeg" class="img-fluid modal-img" alt="２部副委員長Ⅰ">
                        </div>
                    </div>
                    <!-- <button type="button" class="btn-close-custom-2" data-bs-dismiss="modal" aria-label="Close">
                        <svg xmlns="http://www.w3.org/2000/svg" height="38" width="38"
                            viewBox="0 0 512 512">!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--
                            <path fill="#e27ca9"
                                d="M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM175 175c-9.4 9.4-9.4 24.6 0 33.9l47 47-47 47c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l47-47 47 47c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-47-47 47-47c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-47 47-47-47c-9.4-9.4-24.6-9.4-33.9 0z" />
                        </svg>
                        <path d="M6 6L18 18M6 18L18 6" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                            stroke-linejoin="round" />
                        </svg>
                    </button> -->
                </div>
            </div>
        </div>

        <!-- モーダル本体 -->
        <div class="modal fade" id="modal5" tabindex="-1" aria-labelledby="modalTitle" aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <button type="button" class="btn-close-custom" data-bs-dismiss="modal" aria-label="Close">
                        <svg xmlns="http://www.w3.org/2000/svg" height="38" width="38"
                            viewBox="0 0 512 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.-->
                            <path fill="#e27ca9"
                                d="M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM175 175c-9.4 9.4-9.4 24.6 0 33.9l47 47-47 47c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l47-47 47 47c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-47-47 47-47c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-47 47-47-47c-9.4-9.4-24.6-9.4-33.9 0z" />
                        </svg>
                        <path d="M6 6L18 18M6 18L18 6" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                            stroke-linejoin="round" />
                        </svg>
                    </button>
                    <!-- ボディ -->
                    <div class="modal-body row align-items-center">
                        <!-- タイトル + 本文（左側）-->
                        <div class="col-md-6 text-left">
                            <div class="title">二部副委員長Ⅱ</div>
                            <p class="modal-text">　第14回旭祭実行委員会二部副委員長の中山歩です！
                                旭祭実行委員会は数多くの方と関わる機会があり、局によっては外部の企業と関わることもできます。
                                友達を多く作りたい方、イベント運営を経験してみたい方など、どなたでも募集しています！
                                私たちと旭祭実行委員会で最高の思い出を作りましょう！</p>
                        </div>
                        <!-- 画像（右側）-->
                        <div class="col-md-6 text-center">
                            <img src="images/picture/2subpre2.jpg" class="img-fluid modal-img" alt="２部副委員長Ⅱ">
                        </div>
                    </div>
                    <!-- <button type="button" class="btn-close-custom-2" data-bs-dismiss="modal" aria-label="Close">
                        <svg xmlns="http://www.w3.org/2000/svg" height="38" width="38"
                            viewBox="0 0 512 512">!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--
                            <path fill="#e27ca9"
                                d="M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM175 175c-9.4 9.4-9.4 24.6 0 33.9l47 47-47 47c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l47-47 47 47c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-47-47 47-47c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-47 47-47-47c-9.4-9.4-24.6-9.4-33.9 0z" />
                        </svg>
                        <path d="M6 6L18 18M6 18L18 6" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                            stroke-linejoin="round" />
                        </svg>
                    </button> -->
                </div>
            </div>
        </div>

        <!-- 局紹介 -->
        <div class="mt-24 mb-15 text-center">
            <div class="title-frame mx-auto px-2">
                <div class="title">局紹介</div>
                <p class="text">旭祭実行委員会は「企画局」「広報局」「渉外局」「総務局」<br>二部では「企画局」「総務局」の計6つの局に分かれています。
                    入会後、希望する局に所属し活動します。</p>
            </div>
            <div class="container mt-5">
                <div class="profile-wrapper">
                    <!-- １部企画局 -->
                    <div class="profile-item" data-bs-toggle="modal" data-bs-target="#modalA">
                        <div class="square-container">
                            <img src="images/picture/kyoku/kikaku.jpg" class="square-img" alt="１部企画局">
                        </div>
                        <div class="profile-text">企画局</div>
                    </div>

                    <!-- １部広報局 -->
                    <div class="profile-item" data-bs-toggle="modal" data-bs-target="#modalB">
                        <div class="square-container">
                            <img src="images/picture/kyoku/kouhou.jpg" class="square-img" alt="１部広報局">
                        </div>
                        <div class="profile-text">広報局</div>
                    </div>

                    <!-- １部渉外局 -->
                    <div class="profile-item" data-bs-toggle="modal" data-bs-target="#modalC">
                        <div class="square-container">
                            <img src="images/picture/kyoku/shougai.jpg" class="square-img" alt="１部渉外局">
                        </div>
                        <div class="profile-text">渉外局</div>
                    </div>

                    <!-- １部総務局 -->
                    <div class="profile-item" data-bs-toggle="modal" data-bs-target="#modalD">
                        <div class="square-container">
                            <img src="images/picture/kyoku/soumu.jpg" class="square-img" alt="１部総務局">
                        </div>
                        <div class="profile-text">総務局</div>
                    </div>

                    <!-- ２部総務局 -->
                    <div class="profile-item" data-bs-toggle="modal" data-bs-target="#modalE">
                        <div class="square-container">
                            <img src="images/picture/kyoku/2bu.jpg" class="square-img" alt="２部総務局">
                        </div>
                        <div class="profile-text">二部旭祭実行委員会</div>
                        <div id="event"></div>
                    </div>

                    <!-- ２部企画局 -->
                    <!-- <div class="profile-item" data-bs-toggle="modal" data-bs-target="#modalF">
                        <div class="square-container">
                            <img src="images/picture/kyoku/2bu.jpg" class="square-img" alt="２部企画局">
                        </div>
                        <div class="profile-text">二部企画局</div>
                    </div> -->
                </div>

                <!-- 企画局 -->
                <div class="modal fade" id="modalA" tabindex="-1" aria-labelledby="modalTitle" aria-hidden="true">
                    <div class="modal-dialog modal-lg">
                        <div class="modal-content">
                            <button type="button" class="btn-close-custom" data-bs-dismiss="modal" aria-label="Close">
                                <svg xmlns="http://www.w3.org/2000/svg" height="38" width="38"
                                    viewBox="0 0 512 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.-->
                                    <path fill="#e27ca9"
                                        d="M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM175 175c-9.4 9.4-9.4 24.6 0 33.9l47 47-47 47c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l47-47 47 47c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-47-47 47-47c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-47 47-47-47c-9.4-9.4-24.6-9.4-33.9 0z" />
                                </svg>
                                <path d="M6 6L18 18M6 18L18 6" stroke="currentColor" stroke-width="2"
                                    stroke-linecap="round" stroke-linejoin="round" />
                                </svg>
                            </button>
                            <!-- ボディ -->
                            <div class="modal-body row align-items-center">
                                <!-- タイトル + 本文（左側）-->
                                <div class="col-md-6 text-left">
                                    <div class="title">企画局</div>
                                    <p class="modal-text">　企画局はその名の通り、旭祭でなにをやるかを考え、実行する局です！
                                        各イベントの企画・運営を担当し、来場者がワクワクするようなコンテンツを企画するのが私たちの使命です！
                                        企画局では「こんな企画があったら面白い！」
                                        「あの芸能人呼びたい！」そんな熱い想いを持っている人、大歓迎です。一緒に最高の旭祭を作り上げていきましょう！</p>
                                </div>
                                <!-- 画像（右側）-->
                                <div class="col-md-6 text-center">
                                    <div class="speech-bubble d-flex align-items-center">
                                        <img src="images/picture/kyoku/kyokutyou/R_kikaku.jpg" class="square-modal-Rimg"
                                            alt="人物画像">
                                        <p class="comment">　企画局長の安武慎吾です。まずはご入学おめでとうございます！
                                            みんなで旭祭と共に沢山の思い出を作りましょう！企画局でお待ちしております！</p>
                                    </div>
                                    <img src="images/picture/kyoku/kikaku.jpg" class="img-fluid square-modal-img"
                                        alt="企画局">
                                </div>
                            </div>
                            <!-- <button type="button" class="btn-close-custom-2" data-bs-dismiss="modal" aria-label="Close">
                                <svg xmlns="http://www.w3.org/2000/svg" height="38" width="38"
                                    viewBox="0 0 512 512">!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--
                                    <path fill="#e27ca9"
                                        d="M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM175 175c-9.4 9.4-9.4 24.6 0 33.9l47 47-47 47c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l47-47 47 47c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-47-47 47-47c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-47 47-47-47c-9.4-9.4-24.6-9.4-33.9 0z" />
                                </svg>
                                <path d="M6 6L18 18M6 18L18 6" stroke="currentColor" stroke-width="2"
                                    stroke-linecap="round" stroke-linejoin="round" />
                                </svg>
                            </button> -->
                        </div>
                    </div>
                </div>

                <!-- 広報局 -->
                <div class="modal fade" id="modalB" tabindex="-1" aria-labelledby="modalTitle" aria-hidden="true">
                    <div class="modal-dialog modal-lg">
                        <div class="modal-content">
                            <button type="button" class="btn-close-custom" data-bs-dismiss="modal" aria-label="Close">
                                <svg xmlns="http://www.w3.org/2000/svg" height="38" width="38"
                                    viewBox="0 0 512 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.-->
                                    <path fill="#e27ca9"
                                        d="M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM175 175c-9.4 9.4-9.4 24.6 0 33.9l47 47-47 47c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l47-47 47 47c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-47-47 47-47c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-47 47-47-47c-9.4-9.4-24.6-9.4-33.9 0z" />
                                </svg>
                                <path d="M6 6L18 18M6 18L18 6" stroke="currentColor" stroke-width="2"
                                    stroke-linecap="round" stroke-linejoin="round" />
                                </svg>
                            </button>
                            <!-- ボディ -->
                            <div class="modal-body row align-items-center">
                                <!-- タイトル + 本文（左側）-->
                                <div class="col-md-6 text-left">
                                    <div class="title">広報局</div>
                                    <p class="modal-text">　広報局⭐は主に旭祭の宣伝と装飾を行います。
                                        仕事内容はポスター作成・パンフレット作成・webサイト作成、
                                        SNS運用（X、Instagram）、装飾（ステージ・看板・横断幕・大階段等）、
                                        協賛企業企画などです。またIllustratorなどソフトを使う仕事もありますが
                                        初心者でもすぐに使えるようになるので、ぜひ挑戦してみてください！
                                        広報局の魅力は「みんなで作業する」ことと、どれも形に残り「やりがい」があることです。
                                        ぜひ広報局に参加してください！⭐</p>
                                </div>
                                <!-- 画像（右側）-->
                                <div class="col-md-6 text-center">
                                    <div class="speech-bubble d-flex align-items-center">
                                        <img src="images/picture/kyoku/kyokutyou/R_kouhou.jpeg"
                                            class="square-modal-Rimg" alt="人物画像">
                                        <p class="comment">　第14回広報局長の豊岡柚七です！^_^
                                            25生の皆さんご入学おめでとうございます！旭祭実行委員会広報局でぜひお待ちしてます♪</p>
                                    </div>
                                    <img src="images/picture/kyoku/kouhou.jpg" class="img-fluid square-modal-img"
                                        alt="広報局">
                                </div>
                            </div>
                            <!-- <button type="button" class="btn-close-custom-2" data-bs-dismiss="modal" aria-label="Close">
                                <svg xmlns="http://www.w3.org/2000/svg" height="38" width="38"
                                    viewBox="0 0 512 512">!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--
                                    <path fill="#e27ca9"
                                        d="M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM175 175c-9.4 9.4-9.4 24.6 0 33.9l47 47-47 47c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l47-47 47 47c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-47-47 47-47c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-47 47-47-47c-9.4-9.4-24.6-9.4-33.9 0z" />
                                </svg>
                                <path d="M6 6L18 18M6 18L18 6" stroke="currentColor" stroke-width="2"
                                    stroke-linecap="round" stroke-linejoin="round" />
                                </svg>
                            </button> -->
                        </div>
                    </div>
                </div>

                <!-- 渉外局 -->
                <div class="modal fade" id="modalC" tabindex="-1" aria-labelledby="modalTitle" aria-hidden="true">
                    <div class="modal-dialog modal-lg">
                        <div class="modal-content">
                            <button type="button" class="btn-close-custom" data-bs-dismiss="modal" aria-label="Close">
                                <svg xmlns="http://www.w3.org/2000/svg" height="38" width="38"
                                    viewBox="0 0 512 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.-->
                                    <path fill="#e27ca9"
                                        d="M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM175 175c-9.4 9.4-9.4 24.6 0 33.9l47 47-47 47c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l47-47 47 47c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-47-47 47-47c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-47 47-47-47c-9.4-9.4-24.6-9.4-33.9 0z" />
                                </svg>
                                <path d="M6 6L18 18M6 18L18 6" stroke="currentColor" stroke-width="2"
                                    stroke-linecap="round" stroke-linejoin="round" />
                                </svg>
                            </button>
                            <!-- ボディ -->
                            <div class="modal-body row align-items-center">
                                <!-- タイトル + 本文（左側）-->
                                <div class="col-md-6 text-left">
                                    <div class="title">渉外局</div>
                                    <p class="modal-text">　渉外局では、旭祭当日に屋台を運営したり、オリジナル企画を行ったり、
                                        企業と連絡をとって協賛をいただいたり、屋台で使うテントや冷蔵庫などをレンタルしたり、
                                        実行委員が着るスタジャンを発注・デザインしたりと、他の局ではできない経験がたくさんできます！
                                        一緒に旭祭を作り上げていきましょ～！</p>
                                </div>
                                <!-- 画像（右側）-->
                                <div class="col-md-6 text-center">
                                    <div class="speech-bubble d-flex align-items-center">
                                        <img src="images/picture/kyoku/kyokutyou/R_syougai.jpg"
                                            class="square-modal-Rimg" alt="人物画像">
                                        <p class="comment">　渉外局長の和嶋夏輝です！渉外局でたくさん思い出作りましょ～
                                            待ってまーす！</p>
                                    </div>
                                    <img src="images/picture/kyoku/shougai.jpg" class="img-fluid square-modal-img"
                                        alt="渉外局">
                                </div>
                            </div>
                            <!-- <button type="button" class="btn-close-custom-2" data-bs-dismiss="modal" aria-label="Close">
                                <svg xmlns="http://www.w3.org/2000/svg" height="38" width="38"
                                    viewBox="0 0 512 512">!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--
                                    <path fill="#e27ca9"
                                        d="M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM175 175c-9.4 9.4-9.4 24.6 0 33.9l47 47-47 47c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l47-47 47 47c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-47-47 47-47c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-47 47-47-47c-9.4-9.4-24.6-9.4-33.9 0z" />
                                </svg>
                                <path d="M6 6L18 18M6 18L18 6" stroke="currentColor" stroke-width="2"
                                    stroke-linecap="round" stroke-linejoin="round" />
                                </svg>
                            </button> -->
                        </div>
                    </div>
                </div>

                <!-- 総務局 -->
                <div class="modal fade" id="modalD" tabindex="-1" aria-labelledby="modalTitle" aria-hidden="true">
                    <div class="modal-dialog modal-lg">
                        <div class="modal-content">
                            <button type="button" class="btn-close-custom" data-bs-dismiss="modal" aria-label="Close">
                                <svg xmlns="http://www.w3.org/2000/svg" height="38" width="38"
                                    viewBox="0 0 512 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.-->
                                    <path fill="#e27ca9"
                                        d="M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM175 175c-9.4 9.4-9.4 24.6 0 33.9l47 47-47 47c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l47-47 47 47c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-47-47 47-47c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-47 47-47-47c-9.4-9.4-24.6-9.4-33.9 0z" />
                                </svg>
                                <path d="M6 6L18 18M6 18L18 6" stroke="currentColor" stroke-width="2"
                                    stroke-linecap="round" stroke-linejoin="round" />
                                </svg>
                            </button>
                            <!-- ボディ -->
                            <div class="modal-body row align-items-center">
                                <!-- タイトル + 本文（左側）-->
                                <div class="col-md-6 text-left">
                                    <div class="title">総務局</div>
                                    <p class="modal-text">　総務局は委員会の中で最も参加団体と関わる機会が多い局です。
                                        仕事内容は参加団体が旭祭で使用する備品の貸し出しや大学内の教室管理・見回りなど様々な業務があります。
                                        旭祭を裏からサポートするような仕事をやってみたい方、色んな団体と関わっていきたいという方はぜひ総務局に参加してみてください！</p>
                                </div>
                                <!-- 画像（右側）-->
                                <div class="col-md-6 text-center">
                                    <div class="speech-bubble d-flex align-items-center">
                                        <img src="images/picture/kyoku/kyokutyou/R_soumu.png" class="square-modal-Rimg"
                                            alt="人物画像">
                                        <p class="comment">　第14回旭祭総務局長の田波優太です！旭祭で最高の思い出作りましょー！ぜひ総務局に！！</p>
                                    </div>
                                    <img src="images/picture/kyoku/soumu.jpg" class="img-fluid square-modal-img"
                                        alt="総務局">
                                </div>
                            </div>
                            <!-- <button type="button" class="btn-close-custom-2" data-bs-dismiss="modal" aria-label="Close">
                                <svg xmlns="http://www.w3.org/2000/svg" height="38" width="38"
                                    viewBox="0 0 512 512">!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--
                                    <path fill="#e27ca9"
                                        d="M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM175 175c-9.4 9.4-9.4 24.6 0 33.9l47 47-47 47c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l47-47 47 47c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-47-47 47-47c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-47 47-47-47c-9.4-9.4-24.6-9.4-33.9 0z" />
                                </svg>
                                <path d="M6 6L18 18M6 18L18 6" stroke="currentColor" stroke-width="2"
                                    stroke-linecap="round" stroke-linejoin="round" />
                                </svg>
                            </button> -->
                        </div>

                    </div>
                </div>

                <!-- 2部総務局 -->
                <div class="modal fade" id="modalE" tabindex="-1" aria-labelledby="modalTitle" aria-hidden="true">
                    <div class="modal-dialog modal-lg">
                        <div class="modal-content">
                            <button type="button" class="btn-close-custom" data-bs-dismiss="modal" aria-label="Close">
                                <svg xmlns="http://www.w3.org/2000/svg" height="38" width="38"
                                    viewBox="0 0 512 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.-->
                                    <path fill="#e27ca9"
                                        d="M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM175 175c-9.4 9.4-9.4 24.6 0 33.9l47 47-47 47c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l47-47 47 47c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-47-47 47-47c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-47 47-47-47c-9.4-9.4-24.6-9.4-33.9 0z" />
                                </svg>
                                <path d="M6 6L18 18M6 18L18 6" stroke="currentColor" stroke-width="2"
                                    stroke-linecap="round" stroke-linejoin="round" />
                                </svg>
                            </button>
                            <!-- ボディ -->
                            <div class="modal-body row align-items-center">
                                <!-- タイトル + 本文（左側）-->
                                <div class="col-md-6 text-left">
                                    <div class="title">二部総務局</div>
                                    <p class="modal-text">　総務局は、学園祭の運営を支える重要な役割を担っています！
                                        一部と連携しながら仕事を進めるため、多くの人と関わる機会が多く、一部・二部を超えてたくさんの仲間ができます。縁の下の力持ちとして、
                                        学園祭をスムーズに運営するためのサポートをしたい！という方にはピッタリの局です。旭祭を裏から支え、一緒に成功へと導いていきましょう！</p>
                                </div>
                                <!-- 画像（右側）-->
                                <div class="col-md-6 text-center">
                                    <div class="speech-bubble d-flex align-items-center">
                                        <img src="images/picture/kyoku/kyokutyou/2R_soumu.jpeg"
                                            class="square-modal-Rimg" alt="人物画像">
                                        <p class="comment">　第14回二部総務局長の王琿です。一緒に旭祭を成功させるために、
                                            全力で取り組んでいきましょう！興味のある方は、ぜひ総務局へ！</p>
                                    </div>
                                    <img src="images/picture/kyoku/2bu.jpg" class="img-fluid square-modal-img"
                                        alt="２部総務局">
                                </div>
                            </div>
                            <div class="modal-body row align-items-center">
                                <!-- タイトル + 本文（左側）-->
                                <div class="col-md-6 text-left">
                                    <div class="title">二部企画局</div>
                                    <p class="modal-text">　第14回旭祭　二部企画局長の山内遼星です！
                                        旭祭は、一部・二部の枠を超えて、大学全体が一つになって盛り上がる特別なイベント！
                                        その中で、二部企画局は一部の企画局と協力しながら、好きな芸能人やアーティストを招いたトークショーを運営しています。
                                        さらに旭祭をもっと楽しめるように、美味しい屋台を企画したり、運営する側もワクワクできるような取り組みをしています！
                                        仲間と作り上げていく旭祭は一生の思い出になります。
                                        最高の思い出つくりましょ！</p>
                                </div>
                                <!-- 画像（右側）-->
                                <div class="col-md-6 text-center">
                                    <div class="speech-bubble d-flex align-items-center">
                                        <img src="images/picture/kyoku/kyokutyou/2R_kikaku.jpeg"
                                            class="square-modal-Rimg" alt="人物画像">
                                        <p class="comment">　新入生の皆さん、入学おめでとうございます。
                                            二部企画局長の山内遼星です。
                                            このページを見ているそこの君、企画局に入って後悔はさせないぜ。
                                            一緒に伝説の旭祭にしよう！
                                            全員優勝！</p>
                                    </div>
                                    <img src="images/picture/kyoku/2bu.jpg" class="img-fluid square-modal-img"
                                        alt="総務局">

                                </div>
                            </div>
                            <!-- <button type="button" class="btn-close-custom-2" data-bs-dismiss="modal" aria-label="Close">
                                <svg xmlns="http://www.w3.org/2000/svg" height="38" width="38"
                                    viewBox="0 0 512 512">!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--
                                    <path fill="#e27ca9"
                                        d="M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM175 175c-9.4 9.4-9.4 24.6 0 33.9l47 47-47 47c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l47-47 47 47c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-47-47 47-47c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-47 47-47-47c-9.4-9.4-24.6-9.4-33.9 0z" />
                                </svg>
                                <path d="M6 6L18 18M6 18L18 6" stroke="currentColor" stroke-width="2"
                                    stroke-linecap="round" stroke-linejoin="round" />
                                </svg>
                            </button> -->
                        </div>
                    </div>
                </div>


                <!-- 2部企画局
                <div class="modal fade" id="modalF" tabindex="-1" aria-labelledby="modalTitle" aria-hidden="true">
                    <div class="modal-dialog modal-lg">
                        <div class="modal-content">
                            <button type="button" class="btn-close-custom" data-bs-dismiss="modal" aria-label="Close">
                                <svg xmlns="http://www.w3.org/2000/svg" height="38" width="38"
                                    viewBox="0 0 512 512">!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--
                                    <path fill="#e27ca9"
                                        d="M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM175 175c-9.4 9.4-9.4 24.6 0 33.9l47 47-47 47c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l47-47 47 47c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-47-47 47-47c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-47 47-47-47c-9.4-9.4-24.6-9.4-33.9 0z" />
                                </svg>
                                <path d="M6 6L18 18M6 18L18 6" stroke="currentColor" stroke-width="2"
                                    stroke-linecap="round" stroke-linejoin="round" />
                                </svg>
                            </button>
                            <!-- ボディ --
                            <div class="modal-body row align-items-center">
                                <!-- タイトル + 本文（左側）--
                                <div class="col-md-6 text-left">
                                    <div class="title">二部企画局</div>
                                    <p class="modal-text">　第14回旭祭　二部企画局長の山内遼星です！
                                        旭祭は、一部・二部の枠を超えて、大学全体が一つになって盛り上がる特別なイベント！
                                        その中で、二部企画局は一部の企画局と協力しながら、好きな芸能人やアーティストを招いたトークショーを運営しています。
                                        さらに旭祭をもっと楽しめるように、美味しい屋台を企画したり、運営する側もワクワクできるような取り組みをしています！
                                        仲間と作り上げていく旭祭は一生の思い出になります。
                                        最高の思い出つくりましょ！</p>
                                </div>
                                <!-- 画像（右側）--
                                <div class="col-md-6 text-center">
                                    <div class="speech-bubble d-flex align-items-center">
                                        <img src="images/picture/kyoku/kyokutyou/2R_kikaku.jpeg"
                                            class="square-modal-Rimg" alt="人物画像">
                                        <p class="comment">　新入生の皆さん、入学おめでとうございます。
                                            二部企画局長の山内遼星です。
                                            このページを見ているそこの君、企画局に入って後悔はさせないぜ。
                                            一緒に伝説の旭祭にしよう！
                                            全員優勝！</p>
                                    </div>
                                    <img src="images/picture/kyoku/2bu.jpg" class="img-fluid square-modal-img"
                                        alt="総務局">

                                </div>
                            </div>
                            <button type="button" class="btn-close-custom-2" data-bs-dismiss="modal" aria-label="Close">
                                <svg xmlns="http://www.w3.org/2000/svg" height="38" width="38"
                                    viewBox="0 0 512 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--
                                    <path fill="#e27ca9"
                                        d="M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM175 175c-9.4 9.4-9.4 24.6 0 33.9l47 47-47 47c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l47-47 47 47c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-47-47 47-47c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-47 47-47-47c-9.4-9.4-24.6-9.4-33.9 0z" />
                                </svg>
                                <path d="M6 6L18 18M6 18L18 6" stroke="currentColor" stroke-width="2"
                                    stroke-linecap="round" stroke-linejoin="round" />
                                </svg>
                            </button>
                        </div>
                    </div>
                </div> -->
            </div>
            <!--イベント-->
            <div class="mt-24 mb-15 text-center">
                <div class="title">
                    イベント
                </div>
                <div class="container">
                    <div class="row justify-content-around">
                        <div class="col-md-5 mb-3">
                            <img src="images/picture/event/summer.jpg" class="rounded eventimg mt-4 mb-1 ">
                            <div class="px-5">
                                <h3>夏合宿</h3>
                                <p style="text-align: left;">　夏合宿は新たに旭祭実行委員会に参加した一年生を交えて行う最初のイベント行事です。
                                    一泊二日でバーベキュー・花火など全体で盛り上がる事間違いなしのレクを用意しています。
                                    一年生は旭祭本番を迎える前に先輩・幹部の人達だけでなく、他局の新しい友達を作るいい機会になります。
                                    この機会にぜひ、夏合宿に参加してみてはいかがでしょうか！</p>
                            </div>
                        </div>
                        <div class="col-md-5">
                            <img src="images/picture/event/winter.jpg" class="rounded eventimg mt-4 mb-1">
                            <div class="px-5">
                                <h3>冬合宿</h3>
                                <p style="text-align: left;">　冬合宿は文化祭が終わり、代替わりしてから行う最初のイベント行事です。
                                    二泊三日でスキー・スノボを行います。今年は三日目にいちご狩りに行きました。
                                    夜にはビンゴ大会等みんなで盛り上がるレクリエーションを用意しています！
                                    局・学年関係なくコミュニケーションをとることが出来る機会になるので、ぜひみんなで合宿に行きましょう！！
                                </p>
                            </div>
                        </div>
                    </div>
                    <div id="about"></div>
                </div>

                <!-- リンク集 -->
                <div class="mt-24 mb-15 text-center">
                    <div class="title-frame mx-auto px-2">
                        <div class="title">第13回旭祭</div>
                    </div>
                    <a href="https://asahisai.notion.site/HP-4771789a7eb84bc18d46a4c449457aaa?pvs=4" target="_blank"
                        rel="noopener" class="site-button ">旭祭HPアーカイブ </path><i
                            class="fa-solid fa-arrow-up-right-from-square"></i></a>
                    <p class="mt-4">notionのサイトに移動します</p>
                </div>
                <div id="enter" class="mt-24 mb-15 text-center">
                    <div class="title-frame mx-auto px-2">
                        <div class="title">入会希望の方はこちら</div>
                    </div>
                    <a href="https://docs.google.com/forms/d/e/1FAIpQLSev4Vgw-ZkC9pydxklMkoacQHmUipVX-8SPTeDXvvqGReuMpQ/viewform?usp=dialog" target="_blank" rel="noopener" class="site-button ">入会フォーム</path><i
                            class="fa-solid fa-arrow-up-right-from-square"></i></a>
                    <p class="mt-4">google formに移動します<br>googleアカウントの用意をお願いします</p>
                </div>


            </div>
        </div>
    </div>
    <footer class="footer">
        <div class="footer-icon">
            <a class="menu-btn mb-3" href="https://t.co/fQbvGGrpXZ" target="_blank" rel="noopener noreferrer">
                <i class="fa-brands fa-instagram fa-xl mx-auto" style="color: white;"></i>
            </a>
            <a class="menu-btn mb-3" href="https://twitter.com/asahisai" target="_blank" rel="noopener noreferrer">
                <i class="fa-brands fa-x-twitter fa-xl mx-auto" style="color: white;"></i> <!-- Font Awesome 6 の場合 -->
            </a>
            <a class="menu-btn mb-3" href="https://www.youtube.com/@%E6%97%AD%E7%A5%AD" target="_blank"
                rel="noopener noreferrer">
                <i class="fa-brands fa-youtube fa-xl mx-auto" style="color: white;"></i>
            </a>
        </div>
        <div class="text-center">
            <div class="pb-3 text-light">&copy;第14回東京電機大学旭祭実行委員会</div>
        </div>
    </footer>
    <!-- BootstrapのJavaScript -->
    <script>
        document.addEventListener("DOMContentLoaded", function () {
            let generateSakuraInterval;

            function createFallingObject() {
                const obj = document.createElement("div");
                obj.classList.add("falling-object");
                document.body.appendChild(obj);

                // ランダムな位置・サイズ・速度を設定
                const startLeft = Math.random() * window.innerWidth;
                const size = Math.random() * 15 + 10; // 10px～25px（花びらのサイズ）
                const fallDuration = Math.random() * 6 + 4; // 4秒～10秒で落下（速度を遅くした）

                obj.style.left = `${startLeft}px`;
                obj.style.width = `${size}px`;
                obj.style.height = `${size * 1.2}px`; // 少し縦長の形にして花びらっぽく
                obj.style.animation = `fall ${fallDuration}s linear forwards`;

                // アニメーション終了後に削除
                setTimeout(() => {
                    obj.remove();
                }, fallDuration * 1000);
            }

            // 花びらの生成関数
            function startGeneratingSakura() {
                generateSakuraInterval = setInterval(createFallingObject, 1000); // 1秒ごとに生成
            }

            // 1分後に花びらの生成を停止
            setTimeout(() => {
                clearInterval(generateSakuraInterval); // 生成を停止
            }, 60000); // 60000ms = 1分

            // 花びらの生成を開始
            startGeneratingSakura();
        });
    </script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
    <script src="js/script.js" defer></script>
</body>

</html>