.opening-wrapper {
  position: fixed;
  z-index: 9999;
  width: 100%;
  height: 100%;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  animation: fadeOutWrapper 3.5s ease forwards;
  animation-delay: 1.5s;
}

.opening-logo img {
  width: 150px;
  animation: sway 1s ease-in-out infinite;
}

/* 左右に揺れる */
@keyframes sway {

  0%,
  100% {
    transform: translateX(0);
  }

  50% {
    transform: translateX(15px);
  }
}

/* 上下スライドのカバー */
.cover {
  position: absolute;
  width: 100%;
  height: 100%;
  background: #fff;
  z-index: 10000;
  transition: transform 1s ease-in-out;
}

.cover-top {
  top: 0;
  transform: translateY(0);
  animation: slideUp .5s ease-in-out 1s forwards;
}

.cover-bottom {
  top: 0;
  transform: translateY(0);
  animation: slideDown .5s ease-in-out 1s forwards;
}

@keyframes slideUp {
  to {
    transform: translateY(-100%);
  }
}

@keyframes slideDown {
  to {
    transform: translateY(100%);
  }
}

/* メインの fade-in */
@keyframes fadeOutWrapper {
  to {
    opacity: 0;
    pointer-events: none;
  }
}

/* ホバー時の写真 */
.hover-switch {
  content: url(../img/umezaki-1.png);
  transition: opacity 0.3s ease;
}

.hover-switch:hover {
  content: url(../img/umezaki-2.png);
}


  .video-section video {
   width: 100%;
   margin: 0 auto 48px;
   border: 1px ridge #000;
}