@charset "utf-8";

/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  background-color: #030F3E;
}

.video-box {
  position: relative;
  width: 100%;
  height: 100svh;
  overflow: hidden;
}

.video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: center top;
  object-position: center top;
}


/* 縦向き */

@media screen and (max-width: 767px) {
  .video {
    -o-object-position: center;
    object-position: center;
  }
}


@media screen and (min-width: 768px) {
  .video {
   top: 50%;
  left: 50%;
    width: 100%;
    height: auto;
    max-height: 100vh;
    -o-object-position: center;
    object-position: center;
    transform: translate(-50%, -50%);

  }
}


/* 横向き */

@media screen and (max-width: 767px) and (orientation: landscape) {
  .video {
   top: 50%;
  left: 50%;
  width: auto;
    height: 100vh;
    max-width: 100vw;
   -o-object-position: center;
    object-position: center;
    transform: translate(-50%, -50%);
}
}

@media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
  .video {
   top: 50%;
  left: 50%;
  width: auto;
    height: 100vh;
    max-width: 100vw;
   -o-object-position: center;
    object-position: center;
    transform: translate(-50%, -50%);
}
}