<footer id="collabo_footer">
  <div class="footer-wrap">
    <div class="d-flex justify-content-around h-100">
      <div class="footer_item mx-md-3 photo_select_button collaboration_contents picture_contents">
        <a href="javascript:togglePhotoOpenPlaceHolder();">
          <div class="d-flex flex-column justify-content-center align-items-center" id="photo_open_place_holder">
            <div class="t-icon picture"></div>
            <span class="text-white txt">ピクチャ</span>
          </div>
        </a>
      </div>
      <div class="footer_item mx-md-3 collaboration_contents picture_contents video_contents document_contents board_contents">
        <a href="javascript:togglePen();">
          <div class="d-flex flex-column justify-content-center align-items-center" id="penBtn">
            <div class="t-icon pen disable"></div>
            <span class="text-white txt">ペン</span>
          </div>
        </a>
      </div>
      <div class="footer_item mx-md-3 collaboration_contents picture_contents video_contents document_contents board_contents">
        <a href="javascript:toggleEraser();">
          <div class="d-flex flex-column justify-content-center align-items-center" id="eraserBtn">
            <div class="t-icon delete"></div>
            <span class="text-white txt">削除</span>
          </div>
        </a>
      </div>
      <div class="footer_item mx-md-3 collaboration_contents video_contents_host">
        <a href="javascript:toggleCapture();">
          <div class="d-flex flex-column justify-content-center align-items-center" id="captureBtn">
            <div class="t-icon capture"></div>
            <span class="text-white txt">キャプチャ</span>
          </div>
        </a>
      </div>
      <div class="footer_item mx-md-3 collaboration_contents video_contents_user">
        <a href="javascript:toggleCaptureRequest();">
          <div class="d-flex flex-column justify-content-center align-items-center" id="captureRequestBtn">
            <div class="t-icon capture my-0"></div>
            <span class="text-white txt">キャプチャ<br>リクエスト</span>
          </div>
        </a>
      </div>
      <div class="footer_item mx-md-3">
        <a href="javascript:toggleMic();">
          <div class="d-flex flex-column justify-content-center align-items-center" id="micBtn">
            <div class="t-icon voice"></div>
            <span class="text-white txt">マイク</span>
          </div>
        </a>
      </div>
      <div class="footer_item mx-md-3 none host_contents">
        <a href="javascript:toggleRecord();">
          <div class="d-flex flex-column justify-content-center align-items-center" id="recordBtn">
            <div class="t-icon record"></div>
            <span class="text-white txt">録音</span>
            <div class="flash-txt"><p>録音を開始しました</p></div>
          </div>
        </a>
      </div>
      <div class="footer_item mx-md-3">
        <a href="javascript:CoviewBridge.exitCollaboration();">
          <div class="img_wrap bg_red mx-1 end">
            <img src="icon/icon_close_white.svg" class="close_img" alt="閉じる">
          </div>
        </a>
      </div>
    </div>
  </div>
</footer>