Fork: 1
koeki-zero / koeki-zero_website
Transfer to URL with SHA Find file
Newer
Older
koeki-zero_website / sinkan / index.html
@hirokun24-mypc hirokun24-mypc 11 days ago 17 KB スケジュール, 活動報告 更新
Raw Blame History 
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>公益大生新歓ページ - 東北公益文科大学 サークルゼロ</title> <!-- webページタイトル -->
  <link rel="icon" href="../images/logo_fav.png"> <!-- サークル「ゼロ」ロゴ -->
	<link rel="stylesheet" type="text/css" href="index.css"> <!-- css設定 -->
</head>
<body>
  <!-- ヘッダー -->
  <header class="site-header" role="banner">
    <div class="wrap nav" role="navigation" aria-label="トップナビゲーション">
      <div class="brand">
        <img src="../images/logo_fav.png" alt="サークル「ゼロ」 ロゴ" width="36" height="36" />
        <span>サークル「ゼロ」　公益大生新歓ページ</span> <!-- webタイトル -->
      </div>
      <nav class="menu" aria-label="メニュー">
        <!-- <a href="../index.html" class="btn btn-ghost">サークルホームページへ</a> -->
        <!-- <a href="https://www.instagram.com/koeki_zero/" target="_blank" rel="noopener">Instagram</a> -->
      </nav>
    </div>
  </header>

  <!-- スライドショー -->
  <!-- スライドショー バック -->
  <section class="hero" aria-label="サークル活動写真 スライドショー">
    <div class="slider" aria-live="polite">
      <div class="slide is-active" style="background-image:url('../images/repo/koeki-kyoso_20250909.jpg')" role="img" aria-label="共創カフェ スマホサポート教室"></div>
      <div class="slide" style="background-image:url('../images/repo/sakata-coyaproject_20251226.jpg')" role="img" aria-label="こ家プロジェクト様 スマホ相談会"></div>
      <div class="slide" style="background-image:url('../images/repo/sakata-gyokuhoan_20250727.jpg')" role="img" aria-label="酒田玉芳庵様 スマホ教室"></div>
      <div class="slide" style="background-image:url('../images/repo/sakata-gyokuhoan_20260118.jpg')" role="img" aria-label="酒田玉芳庵様 スマホ教室"></div>
      <div class="slide" style="background-image:url('../images/repo/aeon-mikawa_20251025.jpg')" role="img" aria-label="イオン三川店様 スマホセミナー"></div>
      <!-- <div class="progress" aria-hidden="true"><div class="bar"><i></i></div></div> -->
    </div>

    <!-- スライドショー フロント -->
    <div class="hero-inner">
      <div class="kicker">公益大　サークル「ゼロ」</div>
      <h1>地域の方々が安心して<br>スマホを使えるように...</h1>
      <div class="cta">
        <a class="btn btn-primary" href="#join">活動に参加する</a>
        <a class="btn btn-ghost" href="../index.html" target="_blank">サークルホームページへ</a>
      </div>
    </div>
  </section>

 <!-- お知らせ -->
  <section id="news">
    <div class="wrap">
      <h2 class="reveal">お知らせ</h2>
      <ul class="news" aria-label="お知らせ一覧">
        <!-- data-date（YYYY-MM-DD）で30日以内ならNEWバッジが自動表示 -->
        <li class="reveal" data-date="2026-06-08">
          <time datetime="2026-06-08">2026/06/08</time>
          <p><u><a href="#schedule">スケジュールを更新しました</a></u></p>
          <span class="slot"></span>
        </li>
        <li class="reveal" data-date="2026-04-01">
          <time datetime="2026-04-01">2026/04/01</time>
          <p>東北公益文科大学 サークル「ゼロ」　公益大生新歓ページ を公開しました</p>
          <span class="slot"></span>
        </li>
      </ul>
    </div>
  </section>

  <!-- サークル紹介 -->
  <section id="about">
    <div class="wrap grid">
      <div class="card reveal" style="padding:22px;">
        <h2>サークル「ゼロ」とは？</h2>
        <p class="muted">サークル「ゼロ」発足のきっかけは、大学が行っている<u><a href="https://www.koeki-u.ac.jp/site/academics/personnel-training-program.html#inter" target="_blank">課題挑戦型インターンシップ</a></u>から始まりました。
        大学生主体のスマホ相談会の開催を経て、インターンシップに参加した学生を中心にサークル「ゼロ」を立ち上げました。<br>
        山形県酒田市を中心に、ご高齢の方々に向けたスマホ教室・相談会を定期的に開催しているサークルです。
        依頼や要望に応じて、庄内地方各地でも開催しています。</p>
        <ul class="muted">
          <li>主な活動日：土日祝・春休みや夏休みなどの長期休み</li>
          <li>活動場所：大学や山形県内各地</li>
        </ul>
        <p class="muted" style="text-decoration: underline;">※活動への参加は自由ですが、積極的な参加を求めます！</p>
      </div>
    </div>
  </section>


  <!-- 活動内容 -->
  <section id="activities">
    <div class="wrap">
      <h2 class="reveal">活動内容</h2>
      <p class="muted reveal">サークル「ゼロ」の主な活動を紹介します！</p>

      <!-- 活動内容1 -->
      <div class="activities">
        <article class="activity card reveal" style="padding:14px;">
          <div class="ph">
            <img src="../images/repo/koeki-kyoso_20250909.jpg" alt="スマホ教室 / 相談会" loading="lazy" />
          </div>
          <b>スマホ教室 / 相談会</b>
          <p class="muted">
            大学生がスマホのアプリや機能について初歩から講義、相談に応じます。<br>
	          依頼者様と事前に打ち合わせを行い、実施内容を考えます。<br>
	        </p>
        </article>

        <!-- 活動内容2 -->
        <article class="activity card reveal" style="padding:14px;">
          <div class="ph">
            <img src="./img/chat-img.png" alt="イベント参加者向けチャットサポート" loading="lazy" />
          </div>
          <b>イベント参加者向けチャットサポート</b>
          <p class="muted">LINE公式アカウントを用いて、過去にスマホ教室や相談会に参加された方々のサポートを行います。<br></p>
        </article>
      </div>
    </div>
  </section>

  <!-- 代表からのメッセージ -->
  <!-- <section id="leader">
    <div class="wrap">
      <div class="card reveal" style="padding:22px;">
        <h2>代表からのメッセージ</h2>
        <div class="leader">
          <div class="quote" aria-label="代表メッセージ本文">
            <p style="margin:0;">
              はじめまして、<strong>サークル「ゼロ」 代表</strong>です。<br/>
              大学生活は、挑戦と出会いでいくらでも変わります。私たちのサークルは
              「はじめの一歩」を全力で応援します。初心者・経験者を問わず、あなたが
              何かに夢中になれる時間を一緒に作りましょう。まずは新歓で雰囲気を確かめに来てください！
            </p>
          </div>
          <div class="signature">
            <span class="sigline" aria-hidden="true"></span>
            <strong>サークル「ゼロ」 代表</strong>
          </div>
        </div>
      </div>
    </div>
  </section> -->

 <!-- 新歓向けスケジュール -->
  <section id="schedule">
    <div class="wrap">
      <h2 class="reveal">スケジュール</h2>
      <p class="muted reveal">サークル「ゼロ」の活動を見学してみよう！</p>
      <div class="grid" style="grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--gap); margin-top: 16px;">
        
        <!--
        <div class="card reveal" style="padding:18px;">
          <span class="muted">4月上旬</span>
          <h3 style="margin:6px 0 4px;">Welcome Party</h3>
          <p class="muted">
            場所：<b>公益大 酒田キャンパス</b><br>
            公益大 新入生に向けたイベントになります。<br>
            詳細は、大学からのお知らせをご確認ください。
          </p>
        </div>
        
        <div class="card reveal" style="padding:18px;">
          <span class="muted">4月18日(土) 午前10時～12時</span>
          <h3 style="margin:6px 0 4px;">スマホ教室　見学</h3>
          <p class="muted">
            場所：<b>酒田玉芳庵</b><br>
            〒998-0045 酒田市二番町10-7<br>
            <u>※駐車場あり</u>
          </p>
          <div class="cta">
            <a class="btn btn-primary" href="#join">見学申込はこちらから！</a>
          </div>
        </div>
        
        <div class="card reveal" style="padding:18px;">
          <span class="muted">5月13日(水) 10時～12時</span>
          <h3 style="margin:6px 0 4px;">スマホ教室　見学</h3>
          <p class="muted">
            場所：<b>酒田市シルバー人材センター</b><br>
            〒998-0032 酒田市相生町二丁目3番80号<br>
            <u>※駐車場あり</u>
          </p>
          <div class="cta">
            <a class="btn btn-primary" href="#join">見学申込はこちらから！</a>
          </div>
        </div>

        <div class="card reveal" style="padding:18px;">
          <span class="muted">5月16日(土) 10時～12時</span>
          <h3 style="margin:6px 0 4px;">スマホ教室　見学</h3>
          <p class="muted">
            場所：<b>酒田玉芳庵</b><br>
            〒998-0045 酒田市二番町10-7<br>
            <u>※駐車場あり</u>
          </p>
          <div class="cta">
            <a class="btn btn-primary" href="#join">見学申込はこちらから！</a>
          </div>
        </div>

        <div class="card reveal" style="padding:18px;">
          <span class="muted">5月23日(土) 10時～12時</span>
          <h3 style="margin:6px 0 4px;">スマホ教室　見学</h3>
          <p class="muted">
            場所：<b>宮野浦学区コミュニティ防災センター</b><br>
            〒998-0054 酒田市宮野浦二丁目3番3号<br>
            <u>※駐車場あり</u>
          </p>
          <div class="cta">
            <a class="btn btn-primary" href="#join">見学申込はこちらから！</a>
          </div>
        </div>

        <div class="card reveal" style="padding:18px;">
          <span class="muted">5月27日(水) 10時～12時</span>
          <h3 style="margin:6px 0 4px;">スマホ教室　見学</h3>
          <p class="muted">
            場所：<b>酒田市シルバー人材センター</b><br>
            〒998-0032 酒田市相生町二丁目3番80号<br>
            <u>※駐車場あり</u>
          </p>
          <div class="cta">
            <a class="btn btn-primary" href="#join">見学申込はこちらから！</a>
          </div>
        </div>

        <div class="card reveal" style="padding:18px;">
          <span class="muted">6月7日(日) 13時30分～15時30分</span>
          <h3 style="margin:6px 0 4px;">スマホ相談会　見学</h3>
          <p class="muted">
            場所：<b>慶光山観音寺正法会館</b><br>
            〒998-0842 酒田市亀ケ崎5丁目1-38<br>
          </p>
          <div class="cta">
            <a class="btn btn-primary" href="#join">見学申込はこちらから！</a>
          </div>
        </div>

        -->

        <!-- 新歓向けスケジュール1 -->
        <div class="card reveal" style="padding:18px;">
          <span class="muted">6月14日(日) 10時～12時</span>
          <h3 style="margin:6px 0 4px;">スマホ教室　見学</h3>
          <p class="muted">
            場所：<b>酒田玉芳庵</b><br>
            〒998-0045 酒田市二番町10-7<br>
            <u>※駐車場あり</u>
          </p>
          <div class="cta">
            <a class="btn btn-primary" href="#join">見学申込はこちらから！</a>
          </div>
        </div>

        <!-- 新歓向けスケジュール2 -->
        <div class="card reveal" style="padding:18px;">
          <span class="muted">6月20日(土) 13時30分～15時30分</span>
          <h3 style="margin:6px 0 4px;">スマホ相談会　見学</h3>
          <p class="muted">
            場所：<b>北新橋2丁目自治会館</b><br>
            〒998-0865 酒田市北新橋2丁目2-24<br>
          </p>
          <div class="cta">
            <a class="btn btn-primary" href="#join">見学申込はこちらから！</a>
          </div>
        </div>

        <!-- 新歓向けスケジュール3 -->
        <div class="card reveal" style="padding:18px;">
          <span class="muted">6月24日(水) 10時00分～12時00分</span>
          <h3 style="margin:6px 0 4px;">スマホ相談会　見学</h3>
          <p class="muted">
            場所：<b>酒田市役所</b><br>
            〒998-8540 酒田市本町二丁目2番45号<br>
          </p>
          <div class="cta">
            <a class="btn btn-primary" href="#join">見学申込はこちらから！</a>
          </div>
        </div>

        <!-- 新歓向けスケジュール4 -->
        <div class="card reveal" style="padding:18px;">
          <span class="muted">7月8日(水) 10時30分～11時30分</span>
          <h3 style="margin:6px 0 4px;">スマホ相談会　見学</h3>
          <p class="muted">
            場所：<b>大沢コミュニティセンター</b><br>
            〒999-8215 酒田市大蕨字二タ子213番地<br>
            <u>※駐車場あり</u>
          </p>
          <div class="cta">
            <a class="btn btn-primary" href="#join">見学申込はこちらから！</a>
          </div>
        </div>

        <!-- 新歓向けスケジュール5 -->
        <div class="card reveal" style="padding:18px;">
          <span class="muted">7月11日(土) 10時～12時</span>
          <h3 style="margin:6px 0 4px;">スマホ教室　見学</h3>
          <p class="muted">
            場所：<b>宮野浦学区コミュニティ防災センター</b><br>
            〒998-0054 酒田市宮野浦二丁目3番3号<br>
            <u>※駐車場あり</u>
          </p>
          <div class="cta">
            <a class="btn btn-primary" href="#join">見学申込はこちらから！</a>
          </div>
        </div>

        <!-- 新歓向けスケジュール6 -->
        <div class="card reveal" style="padding:18px;">
          <span class="muted">随時開催</span>
          <h3 style="margin:6px 0 4px;">スマホ教室 / 相談会 見学</h3>
          <p class="muted">詳細は、メールまたは各SNSからご連絡ください。</p>
          <div class="cta">
            <a class="btn btn-primary" href="#join">お問い合わせはこちらから！</a>
          </div>
        </div>
        
      </div>
    </div>
  </section>

  <!-- フォトギャラリー -->
  <section id="gallery">
    <div class="wrap">
      <h2 class="reveal">フォトギャラリー</h2>
      <p class="muted reveal">サークル「ゼロ」の活動の様子をいくつか紹介します！</p>
      <div class="gallery" style="margin-top: 14px;">
        
        <!-- フォトギャラリー1 -->
        <figure class="reveal">
          <img src="../images/repo/aeon-mikawa_20251025.jpg" alt="イオン三川店様 スマホセミナー" loading="lazy" />
          <figcaption><b>イオン三川店 様</b><br>スマホセミナー</figcaption>
        </figure>
        
        <!-- フォトギャラリー2 -->
        <figure class="reveal">
          <img src="../images/repo/sakata-paypay_20250903.jpg" alt="酒田市役所様 PayPay使い方相談会" loading="lazy" />
          <figcaption><b>酒田市役所 様</b><br>PayPay使い方相談会</figcaption>
        </figure>
        
        <!-- フォトギャラリー3 -->
        <figure class="reveal">
          <img src="../images/repo/koeki-kosyosai_20251012.jpg" alt="公翔祭 Smart Fes!" loading="lazy" />
          <figcaption><b>公翔祭 出展</b><br>Smart Fes!</figcaption>
        </figure>
      </div>
    </div>
  </section>

  <!-- 参加方法 -->
  <section id="join">
    <div class="wrap">
      <div class="card reveal" style="padding:22px; text-align:center;">
        <h2>サークル「ゼロ」の活動に参加しよう！</h2>
        <p class="muted">メールまたは各SNSからご連絡ください。友達同士の参加も大歓迎です！</p>
        <h3>メール：koeki.zero＠gmail.com</h3>
        <div class="cta" style="justify-content:center;">
          <a class="btn btn-ghost" href="../index.html" target="_blank" rel="noopener">ホームページ</a>
          <a class="btn btn-ghost" href="https://www.instagram.com/koeki_zero/" target="_blank" rel="noopener">Instagram</a>
          <a class="btn btn-ghost" href="https://www.facebook.com/people/%E6%9D%B1%E5%8C%97%E5%85%AC%E7%9B%8A%E6%96%87%E7%A7%91%E5%A4%A7%E5%AD%A6-%E3%82%B5%E3%83%BC%E3%82%AF%E3%83%AB%E3%82%BC%E3%83%AD/61578295646269/" target="_blank" rel="noopener">Facebook</a>
        </div>
      </div>
    </div>
  </section>

  <!-- フッター -->
  <footer>
    <div class="wrap">
      <div>© 2026 東北公益文科大学 サークル「ゼロ」<br>Webページ作成支援：Microsoft Copilot</div>
    </div>
  </footer>

  <script src='index.js'></script> <!-- javascript設定 -->
</body>
</html>