<!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/chat.css">
  <link rel="stylesheet" href="./css/footer.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="chat.html"><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>
    <form class="" action="chat_make_room_confirm.html" method="post">
      <!-- ユーザー検索 -->
      <div class="search_form my-2">
        <form>
          <input type="search" name="search" placeholder="ユーザー検索">
          <span class="src_icon"></span>
        </form>
      </div>

      <!-- タブ -->
      <div class="tabs">
        <input id="tab1" type="radio" name="tab_item" checked>
        <label class="tab_item" for="tab1">マイグループ</label>
        <input id="tab2" type="radio" name="tab_item">
        <label class="tab_item" for="tab2">全グループ</label>
        <div class="tab_content" id="tab1_content">
          <div class="chat_list">
            <!-- お気に入りグループ -->
            <div class="category"><div class="category_name"><span>お気に入り</span></div></div>
            <ul class="p-0 chat_make_room_list">
              <li class="d-flex align-items-center">
                <div class="chat_item d-flex flex-row align-items-center w-100">
                  <div class="chat_item_l">
                    <div class="thumbnail4 thumbnail">
                      <div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
                      <div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
                      <div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
                      <div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
                    </div>
                  </div>
                  <div class="chat_item_m px-0">
                    <div class="d-flex flex-column">
                      <div class="chat_item_t">
                        <span class="chat_item_ttl">グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名</span>
                      </div>
                    </div>
                  </div>
                  <div class="chat_item_r">
                    <span class="star active"></span>
                  </div>
                </div>
              </li>
              <li class="d-flex align-items-center">
                <div class="chat_item d-flex flex-row align-items-center w-100">
                  <div class="chat_item_l_chk">
                    <div class="checkbox">
                      <label>
                        <input type="checkbox" name="checkbox[]" class="checkbox-input">
                        <span class="checkbox-parts"></span>
                      </label>
                    </div>
                  </div>
                  <div class="chat_item_l">
                    <div class="thumbnail">
                      <div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
                    </div>
                  </div>
                  <div class="chat_item_m">
                    <div class="d-flex flex-column">
                      <div class="chat_item_t">
                        <span class="chat_item_ttl">名前太郎名前太郎名前太郎名前太郎名前太郎名前太郎名前太郎名前太郎</span>
                      </div>
                    </div>
                  </div>
                  <div class="chat_item_r">
                    <span class="star disable"></span>
                  </div>
                </div>
              </li>
              <li class="d-flex align-items-center">
                <div class="chat_item d-flex flex-row align-items-center w-100">
                  <div class="chat_item_l_chk">
                    <div class="checkbox">
                      <label>
                        <input type="checkbox" name="checkbox[]" class="checkbox-input">
                        <span class="checkbox-parts"></span>
                      </label>
                    </div>
                  </div>
                  <div class="chat_item_l">
                    <div class="thumbnail">
                      <div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
                    </div>
                  </div>
                  <div class="chat_item_m">
                    <div class="d-flex flex-column">
                      <div class="chat_item_t">
                        <span class="chat_item_ttl">名前 太郎</span>
                      </div>
                    </div>
                  </div>
                  <div class="chat_item_r">
                    <span class="star active"></span>
                  </div>
                </div>
              </li>
              <li class="d-flex align-items-center">
                <div class="chat_item d-flex flex-row align-items-center w-100">
                  <div class="chat_item_l_chk">
                    <div class="checkbox">
                      <label>
                        <input type="checkbox" name="checkbox[]" class="checkbox-input">
                        <span class="checkbox-parts"></span>
                      </label>
                    </div>
                  </div>
                  <div class="chat_item_l">
                    <div class="thumbnail">
                      <div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
                    </div>
                  </div>
                  <div class="chat_item_m">
                    <div class="d-flex flex-column">
                      <div class="chat_item_t">
                        <span class="chat_item_ttl">名前 太郎</span>
                      </div>
                    </div>
                  </div>
                  <div class="chat_item_r">
                    <span class="star disable"></span>
                  </div>
                </div>
              </li>
            </ul>
            <!-- マイグループ -->
            <div class="category"><div class="category_name"><span>マイグループ1</span></div></div>
            <ul class="p-0 chat_make_room_list">
              <li class="d-flex align-items-center">
                <div class="chat_item d-flex flex-row align-items-center w-100">
                  <div class="chat_item_l_chk">
                    <div class="checkbox">
                      <label>
                        <input type="checkbox" name="checkbox[]" class="checkbox-input">
                        <span class="checkbox-parts"></span>
                      </label>
                    </div>
                  </div>
                  <div class="chat_item_l">
                    <div class="thumbnail">
                      <div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
                    </div>
                  </div>
                  <div class="chat_item_m">
                    <div class="d-flex flex-column">
                      <div class="chat_item_t">
                        <span class="chat_item_ttl">名前 太郎</span>
                      </div>
                    </div>
                  </div>
                  <div class="chat_item_r">
                    <span class="star disable"></span>
                  </div>
                </div>
              </li>
              <li class="d-flex align-items-center">
                <div class="chat_item d-flex flex-row align-items-center w-100">
                  <div class="chat_item_l_chk">
                    <div class="checkbox">
                      <label>
                        <input type="checkbox" name="checkbox[]" class="checkbox-input">
                        <span class="checkbox-parts"></span>
                      </label>
                    </div>
                  </div>
                  <div class="chat_item_l">
                    <div class="thumbnail">
                      <div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
                    </div>
                  </div>
                  <div class="chat_item_m">
                    <div class="d-flex flex-column">
                      <div class="chat_item_t">
                        <span class="chat_item_ttl">名前 太郎</span>
                      </div>
                    </div>
                  </div>
                  <div class="chat_item_r">
                    <span class="star disable"></span>
                  </div>
                </div>
              </li>
            </ul>
            <!-- マイグループ -->
            <div class="category"><div class="category_name"><span>マイグループ2</span></div></div>
            <ul class="p-0 chat_make_room_list">
              <li class="d-flex align-items-center">
                <div class="chat_item d-flex flex-row align-items-center w-100">
                  <div class="chat_item_l_chk">
                    <div class="checkbox">
                      <label>
                        <input type="checkbox" name="checkbox[]" class="checkbox-input">
                        <span class="checkbox-parts"></span>
                      </label>
                    </div>
                  </div>
                  <div class="chat_item_l">
                    <div class="thumbnail">
                      <div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
                    </div>
                  </div>
                  <div class="chat_item_m">
                    <div class="d-flex flex-column">
                      <div class="chat_item_t">
                        <span class="chat_item_ttl">名前 太郎</span>
                      </div>
                    </div>
                  </div>
                  <div class="chat_item_r">
                    <span class="star disable"></span>
                  </div>
                </div>
              </li>
              <li class="d-flex align-items-center">
                <div class="chat_item d-flex flex-row align-items-center w-100">
                  <div class="chat_item_l_chk">
                    <div class="checkbox">
                      <label>
                        <input type="checkbox" name="checkbox[]" class="checkbox-input">
                        <span class="checkbox-parts"></span>
                      </label>
                    </div>
                  </div>
                  <div class="chat_item_l">
                    <div class="thumbnail">
                      <div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
                    </div>
                  </div>
                  <div class="chat_item_m">
                    <div class="d-flex flex-column">
                      <div class="chat_item_t">
                        <span class="chat_item_ttl">名前 太郎</span>
                      </div>
                    </div>
                  </div>
                  <div class="chat_item_r">
                    <span class="star disable"></span>
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </div>
        <div class="tab_content" id="tab2_content">
          <div class="chat_list">
            <!-- 全グループ -->
            <div class="category"><div class="category_name"><span>グループ1</span></div></div>
            <ul class="p-0 chat_make_room_list">
              <li class="d-flex align-items-center">
                <div class="chat_item d-flex flex-row align-items-center w-100">
                  <div class="chat_item_l_chk">
                    <div class="checkbox">
                      <label>
                        <input type="checkbox" name="checkbox[]" class="checkbox-input">
                        <span class="checkbox-parts"></span>
                      </label>
                    </div>
                  </div>
                  <div class="chat_item_l">
                    <div class="thumbnail">
                      <div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
                    </div>
                  </div>
                  <div class="chat_item_m">
                    <div class="d-flex flex-column">
                      <div class="chat_item_t">
                        <span class="chat_item_ttl">名前太郎名前太郎名前太郎名前太郎名前太郎名前太郎名前太郎</span>
                      </div>
                    </div>
                  </div>
                  <div class="chat_item_r">
                    <span class="star disable"></span>
                  </div>
                </div>
              </li>
              <li class="d-flex align-items-center">
                <div class="chat_item d-flex flex-row align-items-center w-100">
                  <div class="chat_item_l_chk">
                    <div class="checkbox">
                      <label>
                        <input type="checkbox" name="checkbox[]" class="checkbox-input">
                        <span class="checkbox-parts"></span>
                      </label>
                    </div>
                  </div>
                  <div class="chat_item_l">
                    <div class="thumbnail">
                      <div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
                    </div>
                  </div>
                  <div class="chat_item_m">
                    <div class="d-flex flex-column">
                      <div class="chat_item_t">
                        <span class="chat_item_ttl">名前 太郎</span>
                      </div>
                    </div>
                  </div>
                  <div class="chat_item_r">
                    <span class="star disable"></span>
                  </div>
                </div>
              </li>
            </ul>
            <div class="category"><div class="category_name"><span>グループグループグループグループグループグループ2</span></div></div>
            <ul class="p-0 chat_make_room_list">
              <li class="d-flex align-items-center">
                <div class="chat_item d-flex flex-row align-items-center w-100">
                  <div class="chat_item_l_chk">
                    <div class="checkbox">
                      <label>
                        <input type="checkbox" name="checkbox[]" class="checkbox-input">
                        <span class="checkbox-parts"></span>
                      </label>
                    </div>
                  </div>
                  <div class="chat_item_l">
                    <div class="thumbnail">
                      <div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
                    </div>
                  </div>
                  <div class="chat_item_m">
                    <div class="d-flex flex-column">
                      <div class="chat_item_t">
                        <span class="chat_item_ttl">名前 太郎</span>
                      </div>
                    </div>
                  </div>
                  <div class="chat_item_r">
                    <span class="star disable"></span>
                  </div>
                </div>
              </li>
              <li class="d-flex align-items-center">
                <div class="chat_item d-flex flex-row align-items-center w-100">
                  <div class="chat_item_l_chk">
                    <div class="checkbox">
                      <label>
                        <input type="checkbox" name="checkbox[]" class="checkbox-input">
                        <span class="checkbox-parts"></span>
                      </label>
                    </div>
                  </div>
                  <div class="chat_item_l">
                    <div class="thumbnail">
                      <div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
                    </div>
                  </div>
                  <div class="chat_item_m">
                    <div class="d-flex flex-column">
                      <div class="chat_item_t">
                        <span class="chat_item_ttl">名前 太郎</span>
                      </div>
                    </div>
                  </div>
                  <div class="chat_item_r">
                    <span class="star disable"></span>
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>

      <!-- ルーム解説ボタン -->
      <div class="make_room_confirm_btn">
        <button type="button" name="button">
          ルーム開設<br>
          <span class="select_member_num"></span><span class="select_member">名 選択中</span></button>
      </div>
    </form>
  </main>


<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/chat.js"></script>
<script src="./js/common.js"></script>
</body>
</html>