/*-- Youtube動画 --*/
#mainVisual{position: relative;}
#loader { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1;}
#loader img.loadImg_pc { display: block; width: 100%;}
#loader img.loadImg_sp { display: none;}
#loader_sp { display: block; position: absolute; top: 0; z-index: 1; width: 100%;}
#loader_sp img { width: 100%; height: auto;}
.movie { width: 100%; z-index: 1000; overflow: hidden; max-height: 82vh;}
.movieFlame { width: 100%; padding-bottom: 56.25%; height: 0; position: relative;}
.movieFlame iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.movieFlame_sp {display: none;}
.movivBtn { display: none;}
.coverBox { width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 10;}
.coverBox img { width: 100%; height: 100%;}
.movieBox{position: relative;}

#loader { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1;}
#loader img.loadImg_pc { display: block; width: 100%;}
#loader img.loadImg_sp { display: none;}
#loader_sp { display: block; position: absolute; top: 0; z-index: 1; width: 100%;}
#loader_sp img { width: 100%; height: auto;}
.movieBox{padding-top: 65px;}
@media screen and (min-width:769px) {
 .movieBox { padding-top: 0;}
}
.movieBox .mobieBoxInner { padding: 0; position: relative;}
.movie { width: 100%; z-index: 1000; overflow: hidden; max-height: 89vh;}
.movieFlame { width: 100%; /*padding-bottom: 61.588%;*/ height: 0; position: relative;}
.movieFlame iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.movieFlame_sp { display: none;}
.movieBtn { display: none;}
.coverBox { width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 10;}
#wcv_sys_wrapper .coverBox{position: relative; width: 1px; height: 1px;}


/*ロゴ画像*/
#movieLogo{/* display: none; 中央ロゴ非表示*/
 position: absolute; top:0; right: 0; bottom:0; left: 0; margin: auto; width: 374px; height: 192px; z-index: 2;}
/*scroll*/
#scrollBt{position: absolute; bottom:30px; right: 0;left:0;margin: auto;
background: url("/hospital/nursing_care/_assets/images/ico_scroll.svg") no-repeat 0 center; background-size: contain;
width: 20px; height: 90px; animation: move-y 3s infinite; z-index: 11;
}
#scrollBt a{display: block;}
@keyframes move-y {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}

@media screen and (max-width:1024px) {
 #movieLogo{width: 240px; height: 124px;}
 #movieLogo img{width: 240px; height: auto;}
 #scrollBt{display: none;}
}

.coverBox img { width: 100%; height: 100%;}
.modalBtn { display: block; cursor: pointer;}
#loader img { display: none;}
@media screen and (max-width:768px) {
 #loader img {  display: block; }
 #loader img.loadImg_pc { display: none; }
 #loader img.loadImg_sp { display: block; width: 100%; height: 100%; max-height: 576px;}
}
@media screen and (max-width:768px) {
 .coverBox { display: none;}
 .movieBtn { display: inline-block; position: absolute; right: 0; left:0; bottom: 10px; width: 40px; height: 40px; z-index: 10; margin: auto;}
 .movieBtn img { width: 40px; max-width: 40px; min-width: 40px; height: 40px;}
 /* モーダルウィンドウ */
 .modalArea { position: fixed; z-index: 100000; top: 60px; left: 0; width: 100%; height: 100%;}
 .modalBg { width: 100%; height: 100%; background-color: rgba(30, 30, 30, 0.9);}
 .modalWrapper { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 92%; max-width: 92%; padding: 10px 8px 10px 10px; background: #000; z-index: 10;}
 .closeModal { position: absolute; top: 0.5rem; right: 1rem; cursor: pointer;}
 .movieFlame_sp { display: block; width: 100%; padding-bottom: 56.25%; height: 0px; position: relative;}
 .movieFlame_sp iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
 .movieBox { height: auto; }

 #openModal { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
 #stop { width: 100%; height: 100%;}
}

/*-- 埋め込みビデオタグ <video>  --*/
.vid_contents {width: 100%; text-align: center; margin: auto; position: relative;}
video#vid_main { width: 100%;}
#movieTxt { width: 100%; top: 0; bottom: 0; margin: auto; position: absolute; display: flex; align-content: center; z-index: 10;}
#movieTxt div { text-align: left; height: 131px; padding: 20px 40% 20px 20px; margin: auto; max-width: 1170px; width: 100%;}
@media print, screen and (min-width:1171px) {
 #movieTxt div { padding: 0;}
}