<main role="main" class="container mt-3">
      <h1>一般ユーザー向けマニュアル</h1>
      
      
      <div class="toc">
        <h2>目次</h2>
        <ul>
          <li><a href="#1--アカウント登録方法">1. アカウント登録方法</a></li>
          <li><a href="#2--ログイン方法">2. ログイン方法</a></li>
          <li><a href="#3--トップページの説明--views-index-ejs-">3. トップページの説明</a></li>
          <li><a href="#3-1-橋梁マップ">　　3.1 橋梁マップ</a></li>
          <li><a href="#3-2-最新の投稿">　　3.2 最新の投稿</a></li>
          <li><a href="#3-3-me-top3">　　3.3 ME-TOP3</a></li>
          <li><a href="#3-4-最寄りの橋梁">　　3.4 最寄りの橋梁</a></li>
          <li><a href="#3-5-見てほしい橋">　　3.5 見てほしい橋</a></li>
          <li><a href="#4--橋梁の検索方法">4. 橋梁の検索方法</a></li>
          <li><a href="#5--橋梁ページ詳細--views-bridges-index-ejs-">5. 橋梁ページ詳細</a></li>
          <li><a href="#6--投稿の方法">6. 投稿の方法</a></li>
          <li><a href="#7--投稿画面詳細--views-bridges-review-ejs-">7. 投稿画面詳細</a></li>
          <li><a href="#8--投稿へのいいねの方法">8. 投稿へのいいねの方法</a></li>
          <li><a href="#9--投稿の削除の方法">9. 投稿の削除の方法</a></li>
          <li><a href="#10--返信の方法">10. 返信の方法</a></li>
          <li><a href="#11--返信の削除方法">11. 返信の削除方法</a></li>
          <li><a href="#12--my-pocket詳細">12. My Pocket詳細</a></li>
          <li><a href="#13--their-pocket詳細">13. Their Pocket詳細</a></li>
          <li><a href="#14--橋梁マップの利用方法">14. 橋梁マップの利用方法</a></li>
        </ul>
      </div>

      
      <h2 id="1--アカウント登録方法">1. アカウント登録方法</h2>
      <p>ホームページにアクセスし、右上の「ログイン」ボタンをクリックします。次に「新規登録は<a href="/account/register">こちら</a>」のリンクをクリックし、必要な情報（ユーザー名、メールアドレス、パスワード）を入力して、「登録」ボタンをクリックします。登録が完了すると、自動的にログインされます。</p>

      <h2 id="2--ログイン方法">2. ログイン方法</h2>
      <p>ホームページにアクセスし、右上の「ログイン」ボタンをクリックします。登録したメールアドレスとパスワードを入力して、「ログイン」ボタンをクリックします。正しくログインができると、トップページにリダイレクトされます。</p>

      <h2 id="3--トップページの説明--views-index-ejs-">3. トップページの説明</h2>
      <h3 id="3-1-橋梁マップ">3.1 橋梁マップ</h3>
      <p>トップページの「橋梁マップ」タブをクリックすると、地図上に橋梁が表示されます。各橋梁は、その大きさや緊急輸送道路かどうか、健全度に応じて色分けされたピンで示されます。地図上のピンをクリックすると、該当橋梁の詳細情報がポップアップ表示され、そこから詳細ページに移動できます。</p>
      <h3 id="3-2-最新の投稿">3.2 最新の投稿</h3>
      <p>「最新の投稿」タブをクリックすると、最近投稿された橋梁のレビューがリスト表示されます。レビューは投稿日時順に並び、各橋梁の損傷程度や投稿内容を確認することができます。</p>
      <h3 id="3-3-me-top3">3.3 ME-TOP3</h3>
      <p>「ME-TOP3」タブをクリックすると、いいねを多く獲得したユーザーが表示されます。ランキングは1位から3位まで表示され、各ユーザーのプロフィールページ（Their Pocket）に移動することができます。</p>
      <h3 id="3-4-最寄りの橋梁">3.4 最寄りの橋梁</h3>
      <p>「最寄りの橋梁」タブをクリックすると、現在の位置から最も近い橋梁がリスト表示されます。リストには橋梁名と距離が表示され、各橋梁の詳細ページに移動することができます。</p>
      <h3 id="3-5-見てほしい橋">3.5 見てほしい橋</h3>
      <p>管理者が「この橋を見て」ボタンをクリックしてフラグを立てた橋梁がリスト表示されます。このリストには、特に注意が必要な橋梁が含まれています。</p>

      <h2 id="4--橋梁の検索方法">4. 橋梁の検索方法</h2>
      <p>トップページで検索バーに橋梁名を入力し、「検索」ボタンをクリックします。検索結果として一致する橋梁がリスト表示され、各橋梁の詳細ページにアクセスできます。</p>

      <h2 id="5--橋梁ページ詳細--views-bridges-index-ejs-">5. 橋梁ページ詳細</h2>
      <p>橋梁ページには、選択した橋梁の詳細情報が表示されます。橋梁の基本情報（ID、名前、所在地、緯度経度、架築年、橋長、幅員、面積、健全度、緊急輸送路など）を確認することができ、ストリートビューで周辺の様子を見ることもできます。</p>

      <h2 id="6--投稿の方法">6. 投稿の方法</h2>
      <p>橋梁ページにアクセスし、詳細情報の下部にある「投稿する」ボタンをクリックします。投稿画面で損傷程度やコメントを入力し、「送信」ボタンをクリックして投稿を完了します。</p>

      <h2 id="7--投稿画面詳細--views-bridges-review-ejs-">7. 投稿画面詳細</h2>
      <p>投稿画面では、選択した橋梁に対してレビューを投稿できます。損傷程度を選択し、コメントを入力します。必要に応じて、写真をアップロードすることもできます。入力が完了したら、「送信」ボタンをクリックして投稿します。</p>

      <h2 id="8--投稿へのいいねの方法">8. 投稿へのいいねの方法</h2>
      <p>各投稿の下部にあるハートアイコンをクリックすることで、投稿に「いいね」を付けることができます。いいねをクリックするとハートが塗りつぶされ、いいねの数が増えます。再度クリックするといいねを取り消すことができます。</p>

      <h2 id="9--投稿の削除の方法">9. 投稿の削除の方法</h2>
      <p>自分の投稿であれば、投稿の右上にある「削除」ボタンをクリックして削除することができます。削除を確認するダイアログが表示されるので、「はい」を選択すると投稿が削除されます。</p>

      <h2 id="10--返信の方法">10. 返信の方法</h2>
      <p>投稿の下部にある「返信する」ボタンをクリックすると、返信入力欄が表示されます。ここで返信内容を入力し、「送信」ボタンをクリックして返信を投稿します。</p>

      <h2 id="11--返信の削除方法">11. 返信の削除方法</h2>
      <p>自分の返信であれば、返信の右上にある「削除」ボタンをクリックして削除できます。削除を確認するダイアログが表示されるので、「はい」を選択すると返信が削除されます。</p>

      <h2 id="12--my-pocket詳細">12. My Pocket詳細</h2>
      <p>「My Pocket」では、あなたの所有コイン数、獲得したいいねの数、過去の投稿を確認することができます。また、プロフィール情報の変更も行えます。各タブをクリックして情報を切り替えることができ、コインのアニメーションやいいねのエフェクトも楽しめます。</p>

      <h2 id="13--their-pocket詳細">13. Their Pocket詳細</h2>
      <p>他のユーザーのプロフィールページ「Their Pocket」では、そのユーザーの所有コイン数や獲得したいいねの数、過去の投稿を確認することができます。フォローしている場合は「フォロー解除」ボタン、していない場合は「フォロー」ボタンが表示され、フォローの管理が行えます。</p>

      <h2 id="14--橋梁マップの利用方法">14. 橋梁マップの利用方法</h2>
      <p>橋梁マップタブをクリックして地図を表示します。フィルターボタンを使用して、特定の条件に一致する橋梁のみを表示できます。橋梁の大きさや健全度、緊急輸送道路かどうかで絞り込むことができ、地図上のピンをクリックすると、該当橋梁の詳細情報が表示されます。</p>
    </main>