@charset "UTF-8";

html { height: 100%; }
body {
  margin: 0px;
  background-color: #fff;
}
#stage canvas { width:100%; position:absolute; z-index: 1;}



/*---------------------------------------------------------------------
   video control basic
---------------------------------------------------------------------*/

.video-play-center {
  display:none;
}
.video-play-center img{
  position: absolute;
  z-index: 9999;
  top: 0%;
  left: 0%;
  right: 0%;
  bottom: 0%;
  margin: auto;
  width:10%;
}
.video-control-wrap {
  position:absolute;
  width:100%;
  bottom:0;  
  padding:5px 1.5%;
  box-sizing:border-box;
  z-index:9999;
  background-image: url('../img/control/con-BG.png');
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: cover;
}
.video-control { 
  width:100%;
  display: none;
}
.video-control .control{
  display: table-cell;
  vertical-align: bottom;
}
.video-control .control.seek{
  vertical-align: middle;
  width:40%;
}
.video-control .return { width:45px; }
.video-control .play { width:45px; }
.video-control .volume { width:45px; }
.video-control .volume .button { position: relative; }
.video-control .button img { max-width:30px; }
.video-control .volume .button .volume-seek-wrap { 
  display: none;
  position: absolute;
  top:-95px;
  left:16px;
  height:105px;
  padding-bottom:10px;
  width:24px;
  box-sizing:border-box;
}
.video-control .volume .button .volume-seek-wrap-inner {
  padding-top:5px;
  padding-left:8px;
  background-image: url('../img/control/con-BG.png');
  background-repeat: repeat;
}

.volume-seek-wrap .rangeslider,
.volume-seek-wrap .rangeslider__fill {
  border-radius:0;
}
.volume-seek-wrap .rangeslider__fill {
  background: #00c4f5;
}
.volume-seek-wrap .rangeslider__handle {
  height:0px;
  width:0px;
  background-image:none;
}
.volume-seek-wrap .rangeslider:hover .rangeslider__handle {
  background-image:none;
  background: #00c4f5;
}
.video-control .zoom-in { width:45px; }
.video-control .zoom-out { width:45px; }
.video-control .zoom-out .button img , .video-control .zoom-in .button img { }
.video-control .angle-reset .button img {  }

.video-control .button{
  text-align: center;
  cursor: pointer;
  line-height: 0;
}
.video-control .reload .button { text-align: left; }
.video-control .sns-left { width:75%; }
.video-control .sns-left .button { text-align: left;}
.video-control .sns { width:10%; vertical-align: middle; }
.video-control .sns img { width:35px; }
.video-control .return { width: 45%; }
.video-control.movie .return { width: 20%; }
.video-control .play-pause { display: none; }
.video-control .play-pause.interval-play { display: block; }
.video-control .angle-reset { width:5%;}
.video-control .prev img { transform: rotate(-180deg); }


/*---------------------------------------------------------------------
   video control volume-non & return-non

   size play:30% , seek:40% , reset:30%;
---------------------------------------------------------------------*/

.video-control-wrap.volume-non.return-non .video-control .play {
  width: 30%;
}
.video-control-wrap.volume-non.return-non .video-control .play .button {
  margin-right:10%;
  text-align: right;
}
.video-control-wrap.volume-non.return-non .video-control .angle-reset {
  width: 30%;
}
.video-control-wrap.volume-non.return-non .video-control .angle-reset .button{
  text-align: right;
}



/*---------------------------------------------------------------------
   telop
---------------------------------------------------------------------*/

.telop {
  position:absolute;
  z-index:999;
  display:none;
  pointer-events: none;
}

.telop.show {
  display:block;
}

.telop.center { 
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 100%;
}
.telop.right { right:2%; top:0; }
.telop.left { left:2%; top:0; }
.telop.bottom { bottom:0%;  width:100%;}



/*---------------------------------------------------------------------
   sub 
---------------------------------------------------------------------*/

.dot_line { display:none; position: absolute;  z-index: 999; width: 100%; height: auto; top:0 ; left:0;  pointer-events : none; }




/*---------------------------------------------------------------------
   loading
---------------------------------------------------------------------*/

.loading {
  position: absolute;
  display: none;
  z-index:9999;
  top: -100%; left: -100%; right: -100%; bottom: -100%; margin: auto;
  width: 86px;
  height: 86px;

  -webkit-animation: spin 1.5s linear infinite;
  -moz-animation: spin 1.5s linear infinite;
  -ms-animation: spin 1.5s linear infinite;
  -o-animation: spin 1.5s linear infinite;
  animation: spin 1.5s linear infinite;
}

@-webkit-keyframes spin {
  0% {-webkit-transform: rotate(0deg);}
  100% {-webkit-transform: rotate(360deg);}
}
@-moz-keyframes spin {
  0% {-moz-transform: rotate(0deg);}
  100% {-moz-transform: rotate(360deg);}
}
@-ms-keyframes spin {
  0% {-ms-transform: rotate(0deg);}
  100% {-ms-transform: rotate(360deg);}
}
@-o-keyframes spin {
  0% {-o-transform: rotate(0deg);}
  100% {-o-transform: rotate(360deg);}
}
@keyframes spin {
  0% {transform: rotate(0deg);}
  100% {transform: rotate(360deg);}
}



/*---------------------------------------------------------------------
   clearfix
---------------------------------------------------------------------*/

.clearfix {zoom:1;}
.clearfix:after{
    content: ""; 
    display: block; 
    clear: both;
}



/*---------------------------------------------------------------------
   media query
---------------------------------------------------------------------*/

@media (max-width: 767px) {
  .video-control-wrap  {  
    height: 12%;
  }


  .video-control .control {
    vertical-align: top;
  }

  .video-control .sns img {
    max-width: 50%;
    height: auto;
  }



}

@media (max-width: 320px) {


}