@charset "utf-8";

/* pc  */
@media all and (min-width:1025px) { 
    .main-video-mobile {display: none;}   
    .main-video-tablet {display: none;}   
    .main-video-pc {
        position: absolute; 
        width: 100%; height: 100%; 
        top: 0; bottom: 0;  
        left: 0; right: 0; 
        overflow: hidden;
    }
}

/* tablet */    
@media all and (min-width:641px) and (max-width:1024px) { 
    .main-video-pc {display: none;}   
    .main-video-mobile {display: none;}   
    .main-video-tablet {
        position: absolute; 
        width: 100%; height: 100%; 
        top: 0; bottom: 0;  
        left: 0; right: 0; 
        overflow: hidden;
    }
}

/* mobile */
@media all and (min-width:0px) and (max-width:640px) { 
    .main-video-pc {display: none;}
    .main-video-tablet {display: none;}
    .main-video-mobile {
        position: absolute; 
        width: 100%; height: 100%; 
        top: 0; bottom: 0; 
        left: 0; right: 0; 
        overflow: hidden;
        overflow-x: hidden;        
    } 
}

#mainVideoPc {position: absolute;
    right: 0;
    bottom: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: black;
    object-fit: cover;
    overflow: hidden;
}

#mainVideoTablet {position: absolute;
    right: 0;
    left: 0;
    bottom: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: black;
    object-fit: cover;
    overflow: hidden;
}

#mainVideoMobile {position: absolute;
    right: 0;
    left: 0;
    bottom: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: black;
    object-fit: cover;
    overflow: hidden;
}


.fade-out-pc {
    position: absolute;
    display: inline-block;
    top: 46%;
    right: 50%;
    transform: translateX(50%);
    animation: fadeout 5s;
    -moz-animation: fadeout 5s; /* Firefox */
    -webkit-animation: fadeout 5s; /* Safari and Chrome */
    -o-animation: fadeout 5s; /* Opera */
    animation-fill-mode: forwards;
  }
  @keyframes fadeout {
      from {
          opacity: 1;
      }
      to {
          opacity: 0;
      }
  }
  @-moz-keyframes fadeout { /* Firefox */
      from {
          opacity: 1;
      }
      to {
          opacity: 0;
      }
  }
  @-webkit-keyframes fadeout { /* Safari and Chrome */
      from {
          opacity: 1;
      }
      to {
          opacity: 0;
      }
  }
  @-o-keyframes fadeout { /* Opera */
      from {
          opacity: 1;
      }
      to {
          opacity: 0;
      }
  }

  .fade-out-tablet {
    position: absolute;
    display: inline-block;
    top: 43%;
    right: 50%;
    transform: translateX(50%);
    animation: fadeout 5s;
    -moz-animation: fadeout 5s; /* Firefox */
    -webkit-animation: fadeout 5s; /* Safari and Chrome */
    -o-animation: fadeout 5s; /* Opera */
    animation-fill-mode: forwards;
  }
  @keyframes fadeout {
      from {
          opacity: 1;
      }
      to {
          opacity: 0;
      }
  }
  @-moz-keyframes fadeout { /* Firefox */
      from {
          opacity: 1;
      }
      to {
          opacity: 0;
      }
  }
  @-webkit-keyframes fadeout { /* Safari and Chrome */
      from {
          opacity: 1;
      }
      to {
          opacity: 0;
      }
  }
  @-o-keyframes fadeout { /* Opera */
      from {
          opacity: 1;
      }
      to {
          opacity: 0;
      }
  }
  
  .fade-out-mobile {
    position: absolute;
    display: inline-block;
    top: 43%;
    right: 50%;
    transform: translateX(50%);
    animation: fadeout 5s;
    -moz-animation: fadeout 5s; /* Firefox */
    -webkit-animation: fadeout 5s; /* Safari and Chrome */
    -o-animation: fadeout 5s; /* Opera */
    animation-fill-mode: forwards;
  }
  @keyframes fadeout {
      from {
          opacity: 1;
      }
      to {
          opacity: 0;
      }
  }
  @-moz-keyframes fadeout { /* Firefox */
      from {
          opacity: 1;
      }
      to {
          opacity: 0;
      }
  }
  @-webkit-keyframes fadeout { /* Safari and Chrome */
      from {
          opacity: 1;
      }
      to {
          opacity: 0;
      }
  }
  @-o-keyframes fadeout { /* Opera */
      from {
          opacity: 1;
      }
      to {
          opacity: 0;
      }
  }