<!doctype html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport"
    content="width=device-width, initial-scale=1, shrink-to-fit=no, maximum-scale=1, user-scalable=0">
  <title>LiveTaskyell</title>
  <link rel="stylesheet" href="./css/notosansjp.css">
  <link href="./fontawesome/css/all.css" rel="stylesheet">
  <link rel="stylesheet" href="./css/bootstrap.min.css">
  <link rel="stylesheet" href="./css/common.css">
  <link rel="stylesheet" href="./css/archive.css">
  <link rel="stylesheet" href="./css/footer.css">
  <link rel="stylesheet" href="./css/loading.css">
  <link rel="stylesheet" href="./css/font-awesome.css">
</head>

<body>
  <!-- ナビメニュー -->
  <nav>
    <div class="row h-100 align-items-center">
      <div class="col-4 pr-0">
        <div class="nav-item">
          <div class="nav_prev">
            <a href="#"><span>ホーム</span></a>
          </div>
        </div>
      </div>
      <div class="col-4 p-0">
        <div class="nav-item p-0">
          <h1 class="nav-ttl">アーカイブ</h1>
        </div>
      </div>
      <div class="col-4 pl-0">
        <div class="nav-item text-right">
        </div>
      </div><!-- .col -->
    </div><!-- .row -->
  </nav><!-- nav -->

  <!-- コンテンツ -->
  <main id="archive">
    <!-- 検索 -->
    <div class="search_form">
      <form>
        <input type="search" name="search" placeholder="検索">
        <span class="src_icon"></span>
        <a href="#" class="cancel none">キャンセル</a>
      </form>
    </div>
    <!-- アーカイブリスト -->
    <div class="archive_list content">
      <ul>
        <li class="d-flex align-items-center">
          <a href="archive_detail.html" class="w-100">
            <div class="archive_item d-flex flex-row align-items-center w-100">
              <div class="arhive_img">
                <div class="img_wrap bg_blue">
                  <img src="icon/icon_collabo_videocam.png" alt="動画" />
                </div>
              </div>
              <div class="archive_desc">
                <div class="archive_name">
                  <span>ファイル名.mp4</span>
                </div>
                <div class="archive_date">
                  <span>2021/02/24 16:14</span>
                </div>
              </div>
            </div>
          </a>
        </li>
        <li class="d-flex align-items-center">
          <a href="archive_detail.html" class="w-100">
            <div class="archive_item d-flex flex-row align-items-center w-100">
              <div class="arhive_img">
                <div class="img_wrap bg_blue">
                  <img src="icon/icon_collabo_picture.png" alt="写真" />
                </div>
              </div>
              <div class="archive_desc">
                <div class="archive_name">
                  <span>ファイル名ファイル名ファイル名ファイル名ファイル名ファイル名ファイル名ファイル名ファイル名ファイル名.jpg</span>
                </div>
                <div class="archive_date">
                  <span>2021/02/24 16:14</span>
                </div>
              </div>
            </div>
          </a>
        </li>
        <li class="d-flex align-items-center">
          <a href="archive_detail.html" class="w-100">
            <div class="archive_item d-flex flex-row align-items-center w-100">
              <div class="arhive_img">
                <div class="img_wrap bg_blue">
                  <img src="icon/icon_collabo_headset.png" alt="音声" />
                </div>
              </div>
              <div class="archive_desc">
                <div class="archive_name">
                  <span>ファイル名ファイル名.mp3</span>
                </div>
                <div class="archive_date">
                  <span>2021/02/24 16:14</span>
                </div>
              </div>
            </div>
          </a>
        </li>
        <li class="d-flex align-items-center">
          <a href="archive_detail.html" class="w-100">
            <div class="archive_item d-flex flex-row align-items-center w-100">
              <div class="arhive_img">
                <div class="img_wrap bg_blue">
                  <img src="icon/icon_collabo_document.png" alt="資料" />
                </div>
              </div>
              <div class="archive_desc">
                <div class="archive_name">
                  <span>ファイル名ファイル名.jpg</span>
                </div>
                <div class="archive_date">
                  <span>2021/02/24 16:14</span>
                </div>
              </div>
            </div>
          </a>
        </li>
        <li class="d-flex align-items-center">
          <a href="archive_detail.html" class="w-100">
            <div class="archive_item d-flex flex-row align-items-center w-100">
              <div class="arhive_img">
                <div class="img_wrap bg_blue">
                  <img src="icon/icon_collabo_videocam.png" alt="動画" />
                </div>
              </div>
              <div class="archive_desc">
                <div class="archive_name">
                  <span>ファイル名.mp4</span>
                </div>
                <div class="archive_date">
                  <span>2021/02/24 16:14</span>
                </div>
              </div>
            </div>
          </a>
        </li>
        <li class="d-flex align-items-center">
          <a href="archive_detail.html" class="w-100">
            <div class="archive_item d-flex flex-row align-items-center w-100">
              <div class="arhive_img">
                <div class="img_wrap bg_blue">
                  <img src="icon/icon_collabo_videocam.png" alt="動画" />
                </div>
              </div>
              <div class="archive_desc">
                <div class="archive_name">
                  <span>ファイル名.mp4</span>
                </div>
                <div class="archive_date">
                  <span>2021/02/24 16:14</span>
                </div>
              </div>
            </div>
          </a>
        </li>
        <li class="d-flex align-items-center">
          <a href="archive_detail.html" class="w-100">
            <div class="archive_item d-flex flex-row align-items-center w-100">
              <div class="arhive_img">
                <div class="img_wrap bg_blue">
                  <img src="icon/icon_collabo_videocam.png" alt="動画" />
                </div>
              </div>
              <div class="archive_desc">
                <div class="archive_name">
                  <span>ファイル名.mp4</span>
                </div>
                <div class="archive_date">
                  <span>2021/02/24 16:14</span>
                </div>
              </div>
            </div>
          </a>
        </li>
        <li class="d-flex align-items-center">
          <a href="archive_detail.html" class="w-100">
            <div class="archive_item d-flex flex-row align-items-center w-100">
              <div class="arhive_img">
                <div class="img_wrap bg_blue">
                  <img src="icon/icon_collabo_videocam.png" alt="動画" />
                </div>
              </div>
              <div class="archive_desc">
                <div class="archive_name">
                  <span>ファイル名.mp4</span>
                </div>
                <div class="archive_date">
                  <span>2021/02/24 16:14</span>
                </div>
              </div>
            </div>
          </a>
        </li>
        <li class="d-flex align-items-center">
          <a href="archive_detail.html" class="w-100">
            <div class="archive_item d-flex flex-row align-items-center w-100">
              <div class="arhive_img">
                <div class="img_wrap bg_blue">
                  <img src="icon/icon_collabo_videocam.png" alt="動画" />
                </div>
              </div>
              <div class="archive_desc">
                <div class="archive_name">
                  <span>ファイル名.mp4</span>
                </div>
                <div class="archive_date">
                  <span>2021/02/24 16:14</span>
                </div>
              </div>
            </div>
          </a>
        </li>
        <li class="d-flex align-items-center">
          <a href="archive_detail.html" class="w-100">
            <div class="archive_item d-flex flex-row align-items-center w-100">
              <div class="arhive_img">
                <div class="img_wrap bg_blue">
                  <img src="icon/icon_collabo_videocam.png" alt="動画" />
                </div>
              </div>
              <div class="archive_desc">
                <div class="archive_name">
                  <span>ファイル名.mp4</span>
                </div>
                <div class="archive_date">
                  <span>2021/02/24 16:14</span>
                </div>
              </div>
            </div>
          </a>
        </li>
        <li class="d-flex align-items-center">
          <a href="archive_detail.html" class="w-100">
            <div class="archive_item d-flex flex-row align-items-center w-100">
              <div class="arhive_img">
                <div class="img_wrap bg_blue">
                  <img src="icon/icon_collabo_videocam.png" alt="動画" />
                </div>
              </div>
              <div class="archive_desc">
                <div class="archive_name">
                  <span>ファイル名.mp4</span>
                </div>
                <div class="archive_date">
                  <span>2021/02/24 16:14</span>
                </div>
              </div>
            </div>
          </a>
        </li>
        <li class="d-flex align-items-center">
          <a href="archive_detail.html" class="w-100">
            <div class="archive_item d-flex flex-row align-items-center w-100">
              <div class="arhive_img">
                <div class="img_wrap bg_blue">
                  <img src="icon/icon_collabo_videocam.png" alt="動画" />
                </div>
              </div>
              <div class="archive_desc">
                <div class="archive_name">
                  <span>ファイル名.mp4</span>
                </div>
                <div class="archive_date">
                  <span>2021/02/24 16:14</span>
                </div>
              </div>
            </div>
          </a>
        </li>
        <li class="d-flex align-items-center">
          <a href="archive_detail.html" class="w-100">
            <div class="archive_item d-flex flex-row align-items-center w-100">
              <div class="arhive_img">
                <div class="img_wrap bg_blue">
                  <img src="icon/icon_collabo_videocam.png" alt="動画" />
                </div>
              </div>
              <div class="archive_desc">
                <div class="archive_name">
                  <span>ファイル名.mp4</span>
                </div>
                <div class="archive_date">
                  <span>2021/02/24 16:14</span>
                </div>
              </div>
            </div>
          </a>
        </li>
        <li class="d-flex align-items-center">
          <a href="archive_detail.html" class="w-100">
            <div class="archive_item d-flex flex-row align-items-center w-100">
              <div class="arhive_img">
                <div class="img_wrap bg_blue">
                  <img src="icon/icon_collabo_videocam.png" alt="動画" />
                </div>
              </div>
              <div class="archive_desc">
                <div class="archive_name">
                  <span>ファイル名.mp4</span>
                </div>
                <div class="archive_date">
                  <span>2021/02/24 16:14</span>
                </div>
              </div>
            </div>
          </a>
        </li>
      </ul>
    </div>
    <!-- オーバーレイ -->
    <div class="archive_list">
      <ul class="overlay_src_msg">
      </ul>
    </div>
  </main>
  <!-- フッター -->
  <footer>
    <div class="footer-wrap">
      <div class="d-flex justify-content-around h-100">
        <div class="footer_item">
          <a href="contact.html">
            <img src="icon/icon_contact_gray.png" alt="コンタクト">
            <p>コンタクト</p>
          </a>
        </div>
        <div class="footer_item">
          <a href="chat.html">
            <img src="icon/icon_chat_gray.png" alt="チャット">
            <p>チャット</p>
            <span class="unread_num">999+</span>
          </a>
        </div>
        <div class="footer_item">
          <a href="archive.html">
            <img src="icon/icon_archive.png" alt="アーカイブ">
            <p class="active">アーカイブ</p>
          </a>
        </div>
      </div>
    </div>
  </footer>

  <!-- ローディング -->
  <!--#include virtual="loading.html" -->

  <script src="./js/libs/jquery-3.3.1.min.js"></script>
  <script src="./js/libs/moment.js"></script>
  <script src="./js/libs/bootstrap.min.js"></script>
  <script src="./js/libs/jquery.mark.min.js"></script>
  <script src="./js/archive.js"></script>
  <script src="./js/common.js"></script>
</body>

</html>