@import url('https://fonts.googleapis.com/css2?family=Sawarabi+Gothic&display=swap');
@import url('https://use.typekit.net/bjb0qov.css');

@font-face {
  font-family: 'BIZUDPGothicB';
  src: url(/config/font/BIZUDPGothic-Bold.ttf);
}
@font-face {
  font-family: 'AEB';
  src: url(/config/font/Aeb_03.ttf);
}
:root {
  --primary: #fff;
  --primary-text: #ffffff;
  --secondary: #ebc908;
  --secondary-text: #ffffff;
  --accent: #505050;
  --accent-text: rgb(255, 255, 255);
}

/*========= 背景動画設定のCSS ===============*/

/*header設定*/
#header {
  position: relative;
  /*h1の中央寄せ配置の起点とするためのrelative*/
  height: 100vh;
  /*高さを全画面にあわせる*/
}

#video-area {
  position: fixed;
  z-index: -1;
  /*最背面に設定*/
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  overflow: hidden;
}

#video {
  /*天地中央配置*/
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 100vh;
  width: auto;
  min-height: 100%;
  min-width: 100%;
}
/* @media screen and (min-width:480px) {
  #video {
    top:calc((60vh - 50vw));
    height: auto;
    width: calc((180vh - 100vw));
  }
}

@media screen and (min-width:800px) {
  #video {
    top: calc((100vh - 50vw));
    height: auto;
    width: calc((200vh - 100vw));
  }
} */
/*見出し設定*/
h1 {
  /*要素の配置*/
  position: absolute;
  /*要素を天地中央寄せ*/
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  /*見た目の調整*/
  color: #fff;
  text-shadow: 0 0 15px #666;
}

/*========= レイアウトのためのCSS ===============*/

#container {
  background: #fff;
  padding: 300px 0;
  text-align: center;
}
.eachTextAnime {
  /* color:rgba(181, 255, 20, 0.9); */
    /* background-color: rgba(0, 0, 0, .7);
    width: 100vw;
    text-align: center; */
    /* color: rgba(181, 255, 20, 0.9); */
    /* padding: 2rem 2rem; */
}

.eachTextAnime span {
  opacity: 0;
}

.eachTextAnime.appeartext span {
  animation: text_anime_on 1s ease-out forwards;
}

@keyframes text_anime_on {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes gradation {
	0%,100% {
    /* color: #ffffff; */
    opacity: 1;
		/* background-position: 0%; */
	}
  10% {
    opacity: 1;
  }
  20% {
    opacity: .8;
  }
  30% {
    opacity: 1;
  }
  70% {
    opacity: .8;
  }
  50% {
    color: #aaa;
    opacity: .6;
    /* background-position: 100%; */
	}
}
body {
  /* font-family: MochiyPopPOne !important; */
  font-family: "futura-pt-bold",BIZUDPGothicB !important;
  font-weight: 800;
  font-style: normal;
  /* background: repeating-linear-gradient(#04ff00, #12dc00 20px, #000000 20px, #000000 40px); */
  /* background-color: rgba(0, 0, 0, 1) !important; */
  background-color: #121212;
  background-image:
    url(/config/images/main/bg.jpg),
    repeating-linear-gradient(0deg, rgba(0, 255, 0, 1) 0px 1px, transparent 1px 20px),
    repeating-linear-gradient(90deg, rgba(0, 255, 0, 1) 0px 1px, transparent 1px 20px);
  background-size: cover;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
}


@-webkit-keyframes anime {
  0% {
    -webkit-animation-timing-function: ease-in;
    background-image: url(/config/images/main/dn2m.jpg);
    background-position: right 10% bottom 10%;
  }

  10% {
    background-image: url(/config/images/main/dn2m.jpg);
background-position: right 0% bottom 0%;
  }

  40% {
    -webkit-animation-timing-function: ease-out;
    background-image: url(/config/images/main/dn2m.jpg);
background-position: right 10% bottom 10%;  }

  50% {
    background-image: url(/config/images/main/dn2m.jpg);
background-position: right 0% bottom 0%;  }

  100% {
background-position: right 10% bottom 10%;
    background-image: url(/config/images/main/dn2m.jpg);  }
}

@keyframes anime {
  0% {
    animation-timing-function: ease-in;
    background-image: url(/config/images/main/dn2m.jpg);
  background-position: right 10% bottom 10%;
  }

  10% {
    background-image: url(/config/images/main/dn2m.jpg);
  background-position: right 0% bottom 0%;
  }

  40% {
    animation-timing-function: ease-out;
    background-image: url(/config/images/main/dn2m.jpg);
  background-position: right 10% bottom 10%;
  }

  50% {
    background-image: url(/config/images/main/dn2m.jpg);
    background-position: right 0% bottom 0%;
  }

  100% {
    background-image: url(/config/images/main/dn2m.jpg);
    background-position: right 10% bottom 20%;
  }
}

/* .features{
  z-index: 10;
} */
.web3modal-modal-lightbox {
  z-index: 100;
}