@charset "UTF-8";

/* ==========================================================

## ホームメイト・リサーチ モーダル再生動画用スタイル
scope : モーダル再生動画部分

memo :
基本的にこのCSSはモーダル再生動画関係のスタイルのみ設定する事
モーダルボックス（.mov_modal）と動画プレイヤー（.video-js）の
大きさは、案件によって再生動画のサイズが変わる可能性が高いので
動画サイズに合わせてページ個別CSSでの設定を推奨
例）
.mov_modal {
  width: 750px;
}
.mov_modal .video-js {
  height: 430px;
  width: 760px;
}



last modify : 2017/11/07 304_uehara 新規作成

modify :

2017/11/07 304_uehara 新規作成
========================================================== */

body .modal-wrap {
  background-color: #000;
  display: none;
  height: 100%;
  left: 0;
  overflow: auto;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 101;
}
.modal-close-area {
  width:100%;
  height:100%;
  position: absolute;
  top: 0;
  left: 0;
}

.modal-overlay {
  display: none;
  height: 120%;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 100;
}

/* ---------------------------------------
 動画用モーダルクラス .mov_modal
---------------------------------------- */
.js_modal_content.mov_modal {
  background-color: #000;
  border: none;
  display: none;
  margin: 0 ;
  position: fixed;
  padding: 0;
}
.js_modal_content.mov_modal .clsbtn {
  position: absolute;
  display: block;
  top:-25px;
  right:-25px;
  width:60px;
  height: 60px;
  cursor:pointer;
  background: url(/tado_onsen/js/video_js/image/btn_modal_close.png) no-repeat left top;
  text-indent: 200%;
  white-space: nowrap;
  overflow: hidden;
  z-index:102;
  border: none;
  outline: none;
}
.js_modal_content.mov_modal .clsbtn:hover {
  background-position: left bottom;
}


/* ---------------------------------------
 動画プレイヤーDLボタン非表示対応
---------------------------------------- */
video::-webkit-media-controls-enclosure {
  overflow:hidden;
}
video::-webkit-media-controls-panel {
  width: calc(100% + 30px); /* Adjust as needed */
}
/* iOS対応 */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
  video::-webkit-media-controls-panel {
    width: 100%;
  }
}