@charset "utf-8";

header {
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url('../images/main.webp');
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    }
    header h1 {
        font-size: 7vw;
        font-family:  'Oswald';
        -webkit-text-stroke: 0.08rem rgba(51,51,51,0.7);
        animation-name: logo;
        animation-duration: 2s;
        }

section {
  position: relative;
  width: 100%;
  height: 100vh;
  margin: 0 auto;
  background: transparent;
  text-align: center;
  }
  section video  {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /*縦横幅指定*/
    width: 177.77777778vh; /* 16:9 の幅→16 ÷ 9＝ 177.77% */
    height: 56.25vw; /* 16:9の幅 → 9 ÷ 16 = 56.25% */
    min-width: 100%;
    min-height: 100%;
    z-index: -100;
    background-size: cover;
    }
  section div  {
    width: 90%;
    height: 100%;
    margin: 0 auto;
    background: rgba(51,51,51,0.7);
    text-align: center;
    }
    section div h2  {
      margin: 0 auto;
      text-align: center;
      }

/* --------------------------------
    animation key frames
-------------------------------- */
@keyframes logo {
    from {
      opacity: 0;
      transform: translateY(5%) scale(0.9,0.9);
    }
    to {
      opacity: 1;
      transform: translateY(0) scale(1,1);
    }
  }