:root{
  --main: #f0fff0;
  --sub:  #556b2f;
  --acsent: #6b8e23;
  --nav0: #eeffc7;
  --nav1: #9acd32;
  --color1: #94a540;
  --color2: #c0c67a;
  --color3: #eddfb2;
  --color4:  #7a8446;
  --color5:  #7d911b;
  --color6:  #353e05;
  --font: #6f4a2a;
  --background: #a98546;

  --animate-duration: 2s !important;
  --animate-delay: 3s !important;
  --animate-repeat: 1 !important;
}

.video-container {
  margin: 0;
  width: 100vw;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

.video-wrap {
  position: fixed;
  overflow: hidden;
  width: 100vw;
  height: 100vh;
}

video {
  min-width: 100vw;
  min-height: 100vh;
  position: absolute;
}

body {
    margin: 0px;
    padding: 0px;
}

.text{
    position: absolute;
    padding: 50px;
    color: var(--main);
  }

.top{
  font-size: 20px;
  margin: 0;
  padding-top: 20px;
  margin-top: 20px;
  vertical-align: top;
  align: left;
}
.medium{
  font-size: 14px;
  padding-top: 30px;
  padding-bottom: 8px;
  margin: 0;
}
.next{
  font-size:45px;
  margin: 10px;
  padding: 8px;
  color: orangered;
  border: solid 4px orangered;
  transition: all 500ms 0s ease-in;
  border-radius: 10px;
  text-decoration: none;
}
.next:hover{
  color: white;
  background-color: orangered;
}
p {
  margin:0;
  padding:0;
  line-height: 150%;
}
/*画面サイズが変わっても常に動画の中央が表示されるようにする*/
/*動画よりも画面が横に長くなるとき用*/
@media (aspect-ratio: 16/9), (min-aspect-ratio: 16/9) {
  video {
    width: 100vw;
    top: 50%;
    transform: translateY(-50%);
  }
}

/*動画よりも画面が縦に長くなるとき用*/
@media (max-aspect-ratio: 16/9) {
  video {
    height: 100vh;
    left: 50%;
    transform: translateX(-50%);
  }
}

@media only screen and (max-width: 1000px) /*smartphone*/ 
{
  h2{
    font-size: 50px;
    color: var(--color1);
    margin: 0px;
    padding-left: 40px;
    padding-bottom: 0px;
    font-weight: bold;
  }
  .span{
    font-size: 20px;
    padding-left: 40px;
    color: var(--color3);
    font-weight: bold;
  }
}


@media only screen and (min-width: 1000px) /*PC*/ 
{
  h2{
  font-size: 90px;
  color: var(--color1);
  margin: 0px;
  padding-left: 20px;
  padding-bottom: 0px;
  font-weight: bold;
}
  .text{
    text-align: center;
    width: 100vw;
  }
  .div{
    margin-left: auto;
    margin-right: auto;
  }
  .span{
    font-size: 28px;
    padding-left: 40px;
    color: var(--color3);
    font-weight: bold;
}
}