*{
  margin: 0;
  padding: 0;
  color: #333;
  text-decoration: none;
}

html{
  scroll-behavior: smooth;
  overflow: auto;
}

body {
  overflow: hidden;
  font-family: serif;
  line-height: 1.6rem;
  background-color: #000;
}

main{
  overflow: visible;
}

.fadein{
  opacity: 0;
  color: #0a493b;
  visibility: hidden;
  transform: scale(3, 3);
  transition: all 2s cubic-bezier(0.170, 0.935, 0.305, 1.000);
}
.active{
  opacity: 1;
  color: #333;
  visibility: visible;
  transform: scale(1, 1);
}

header{
  height: 3.5rem;
  background: #000;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  top: 0;
  z-index: 999;
  transform: translate(0, -100%);
  animation: .8s cubic-bezier(0.170, 0.935, 0.305, 1.000) 4s header forwards;
}
  @keyframes header {
    from{
      transform: translate(0, -100%);
    }
    to{
      transform: translate(0, 0);
      filter: drop-shadow(0px 0px 10px rgba(0,0,0,.8));
    }
  }

header h1{
  font-size: 80%;
  letter-spacing: 2px;
  margin: 1rem 0 0 1rem;
  text-align: left;
  position: fixed;
  top: 0;
  z-index: 999;
  transform: translate(-200%, 0);
  animation: .8s cubic-bezier(0.170, 0.935, 0.305, 1.000) 4.5s header_h1 forwards;
}
  @keyframes header_h1 {
    from{
      transform: translate(-200%, 0);
    }
    to{
      transform: translate(0, 0);
    }
  }

  header h1 a{
    color: #fff;
    transition: .8s cubic-bezier(0.170, 0.935, 0.305, 1.000);
  }
  #header_h1.active a{
    color: #333;
  }

#nav{
  position: fixed;
  top: 0;
  right: 0;
  width: 3.5rem;
  height: 3.5rem;
  z-index: 999;
  transition: 1s ease-in;
}
#nav.nav{
  mix-blend-mode: normal;
  background: transparent;
  backdrop-filter: none;
  box-shadow: none;
  transition: 1s ease-out;
}

#nav_toggle {
  display: block;
  position: relative;
  margin: auto;
  top: 0.875rem;
  width: 1.75rem;
  height: 1.5rem;
  transform: translate(200%, 0);
  animation: .8s cubic-bezier(0.170, 0.935, 0.305, 1.000) 4.5s nav_toggle forwards;
}
  @keyframes nav_toggle {
    from{
      transform: translate(200%, 0);
    }
    to{
      transform: translate(0, 0);
    }
  }
#nav_toggle i {
  display: block;
  width: 100%;
  height: 2px;
  background-color: #fff;
  position: absolute;
  transition: transform cubic-bezier(0.545, 0.080, 0.520, 0.975) .5s, opacity cubic-bezier(0.545, 0.080, 0.520, 0.975) .5s;
}
#nav_toggle i:nth-child(1) {
  top: 0;
}
#nav_toggle i:nth-child(2) {
  top: 0;
  bottom: 0;
  margin: auto;
}
#nav_toggle i:nth-child(3) {
  bottom: 0;
}
#nav_toggle.nav_toggle i:nth-child(1) {
  transform: translateY(10px) rotate(-45deg);
  background-color: #333;
}
#nav_toggle.nav_toggle i:nth-child(2) {
  opacity: 0;
  background-color: #333;
}
#nav_toggle.nav_toggle i:nth-child(3) {
  transform: translateY(-12px) rotate(45deg);
  background-color: #333;
}

nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity cubic-bezier(0.545, 0.080, 0.520, 0.975) .5s, visibility cubic-bezier(0.545, 0.080, 0.520, 0.975) .5s;
  z-index: 998;
}
#navigation{
  background: #ACD0D1;
  height: 100vh;
}
#navigation ul{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
#navigation ul li{
  text-align: center;
}
#navigation.navigation {
  opacity: 1;
  visibility: visible;
}

nav ul {
  padding-left: 0;
  list-style: none;
}

nav ul li{
  margin-top: 2px;
  display: flex;
  flex-direction: column;
}

nav ul li a{
  font-weight: bold;
  letter-spacing:3px;
  font-size: 130%;
  padding-top: 2rem;
  color: #333;
}

#toEN{
  padding: 5px 0;
  margin: 2rem;
  width: 4rem;
  background: #1f8f93;
  color: #fff;
  border-radius: 20px;
}

article{
  margin: 0 auto;
  padding: 0;
  border-radius: 10px;
  margin: 20px 5px;
  text-align: center;
  position: relative;
}

section{
  text-align: center;
}

h1{
  margin: 2rem;
  letter-spacing: 10px;
  text-align: center;
}

h2{
  color: #333;
}

h3{
  padding: 1rem 0;
}

p, blockquote, ul, ol, dl, li, table, pre {
  margin: 5px 0;
  font-size: 85%;
  letter-spacing: 2px;
}

.p-center{
  margin: 0 auto;
  width: 80%;
}
p{
  text-align: left;
}

span{
  display: inline-block;
}

li {
  margin-left: 10px;
  text-align: left;
}

ul, ol {
  padding-left: 40px;
  padding-bottom: 10px;
  margin-top: 0;
  text-align: left;
}

svg{
  width: 80%;
  height: auto;
  margin: .5rem auto;
  fill: transparent;
  transition: all 1s ease-out;
}
path, rect{
  transition: all 1s ease-out;
}

table{
  background: transparent;
  width: 80%;
  margin: .5rem auto;
  transition: all 1s ease-out;
}

th,td{
  background: transparent;
  width: 10%;
  margin: .5rem;
  border: 1px solid #888;
  transition: all 1s ease-out;
}

audio{
  margin: .5rem auto;
}

img{
  width: 100%;
  height: auto;
}

.link p{
  color: #0084d2;
}

.red{
  color: #FF3939;
}

#top{
  width: 100%;
  height: 100vh;
  margin: 0;
  border-radius: 0px;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  animation: 10s cubic-bezier(0.545, 0.080, 0.520, 0.975) top forwards;
}
  @keyframes top {
    0% {
      visibility: visible;
      opacity: 1;
      background: #000;
      z-index: 2;
    }

    25% {
      opacity: 1;
      background: #ACD0D1;
      z-index: 2;
    }

    50%{
      opacity: 0;
      z-index: 2;
    }

    51%{
      opacity: 0;
      z-index: -999;
    }
  }

#top h1{
  margin: 0;
  width: 90%;
  position: absolute;
  top: 50%;
  left: 50%;
  animation: 2.5s cubic-bezier(0.545, 0.080, 0.520, 0.975) top_h1 forwards;
}
  @keyframes top_h1 {
    from {
      color: #000;
      opacity: 0;
      transform:translate(-50%, -50%) scale(4, 4);
    }

    to {
      color: #fff;
      opacity: 1;
      transform:translate(-50%, -50%) scale(1, 1);
    }

  }

#home{
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: 100vh;
  width: 100%;
  margin: 0;
}

#main-image{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1, 1);
  height: 100vh;
  width: auto;
  transition: all 2s cubic-bezier(0.170, 0.935, 0.305, 1.000);
}
#main-image.scale2{
  transform: translate(-50%, -50%) scale(2, 2);
}

#home h1{
  margin: 0;
  width: 90%;
  color: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#home_h1.active{
  display: none;
}

.scroll {
  position: absolute;
  bottom: 5em;
  left: 50%;
  width: 3em;
  transform: translate(-50%, 0);
  height: 3em;
  animation: fadein 2s ease-out forwards;
  opacity: 0;
}
.scroll.active{
  display: none;
}
@keyframes fadein {
  from{ opacity: 0}
    to{ opacity: 1}
}
.scroll p{
  margin: 0;
  color: #fff;
  position: absolute;
  top: 0;
  letter-spacing: 2px;
}
.scroll span {
  width: 1em;
  height: 1em;
  position: absolute;
  top: 25%;
  left: 50%;
  transform: translateX(-50%) translateY(0) rotate(-45deg);
  border-left:  1px solid #fff;
  border-bottom:  1px solid #fff;
  animation: popping-arrow 2s infinite ease-out;
}
.scroll span:hover {
  transform: translateX(-50%) translateY(.5em) rotate(-45deg) ;
  animation: paused;
}
@keyframes popping-arrow {
  0% {
    transform: translateX(-50%) translateY(0) rotate(-45deg);
  }
  30% {
    transform: translateX(-50%) translateY(.5em) rotate(-45deg);
  }
  60% {
    transform: translateX(-50%) translateY(0) rotate(-45deg);
  }
}

#what{
  margin: 100vh 5px 20px 5px;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  background-color: rgba(255, 255, 255, 0.5);
}

#what h2{
  padding: 4rem 0 1rem 0;
}

#what p{
  width: 90%;
  display: block;
  margin: 0 auto;
  padding: 0 0 4rem 0;
}

#youtube{
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  background-color: rgba(255, 255, 255, 0.5);
  padding: 3rem 0 0 0;
}

#youtube .youtube{
  width: 96%;
  height: auto;
  margin: 0 auto;
}

#youtube h3{
  padding: 1rem 0 3rem 0;
}

#youtube .sns{
  display: flex;
  justify-content: flex-end;
}

#youtube .twitter{
    margin: 0 1rem 1rem 1rem;
}

/*
#missionImage{
  background: #fff;
  width: 100%;
  height: 100vh;
  z-index: 40;
}

#missionImage.position{
  position: fixed;
  bottom: 0;
}

#missionImage img{
  height: 100vh;
  width: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#missionImage{
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  background-color: rgba(255, 255, 255, 0.5);
}
*/



#mission{
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  background-color: rgba(255, 255, 255, 0.5);
}

#mission section{
  margin: 0 auto;
}

#mission h2{
  color: #333;
  padding: 4rem 0 2rem 0;
}

#mission p{
  display: block;
  margin: 0 auto;
  width: 95%;
  padding: 0 0 1rem 0;
}

#mission h5{
  padding: 1rem 0;
  font-size: 18px;
}

#free h5{
  color: #DB7954;
}

#second h5{
  color: #4A804F;
}

#future{
  padding: 0 0 3rem 0;
}

#future h5{
  color: #2F65AA;
}

#nft{
  padding: 3rem 0;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  background-color: rgba(255, 255, 255, 0.5);
}

#nftFinish{
  padding: 1rem;
}

#nft section{
  width: 90%;
  margin: 0 auto;
}

#nft h3{
  padding: 3rem 0 2rem 0;
}

#nft h5{
  margin: 1rem 0;
  font-size: 18px;
  font-weight: normal;
}

#nft p{
  margin: 1rem 0 0 0;
}

.gray{
  color: #888;
}

#soundCloud{
  padding: 2rem 0 0 0;
}

#nftTitle{
  font-size: 20px;
}

#nftTEXT2{
  overflow-wrap: break-word;
}

#nftUl{
  display: block;
  margin: 0 auto;
  padding: 0;
}

#nftTEXT3{
  margin: 0;
}

.collab{
  width: 275px;
  height: 275px;
  margin: 1rem auto;
  overflow: hidden;
  background: none;
  transition: all 1s cubic-bezier(0.170, 0.935, 0.305, 1.000);
  transform: scale(1, 1);
  position: relative;
}
.collab:hover{
  transform: scale(1.1, 1.1);
  z-index: 990;
}
.collab:hover .collabText{
  opacity: 1;
}

.collabText{
  opacity: 0;
  width: 275px;
  padding: 0 0 1rem 0;
  background: linear-gradient(rgba(0,0,0,.2),rgba(0,0,0,.8));
  transition: all 1s cubic-bezier(0.170, 0.935, 0.305, 1.000);
  position: absolute;
  bottom: 0;
}

.collabText p, .collabText li{
  color: #fff;
  margin: 0;
  padding: 0;
}
.collabText p{
  font-size: 80%;
  padding: 0 0 0 .5rem;
  letter-spacing: 0;
}
.collabText li{
  list-style-type: none;
  padding: 0 0 0 1.5rem;
  letter-spacing: 1px;
}

#sns{
  padding: 1rem 0 1rem 0;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  background-color: rgba(255, 255, 255, 0.5);
}

#sns section{
  width: 90%;
  margin: 0 auto;
}

/*
#sns img{
  height: 100vh;
  width: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
*/

#sns h2{
  padding: 3rem 0 0 0;
}

#sns h2, #sns p{
  text-align: center;
}

#snsP1{
  padding: 1rem 0;
}

#snsBtn p{
  display: block;
  margin: 1rem auto;
}


.twitter{
  padding: 5px 0;
  margin: 1rem;
  width: 7rem;
  background: #9CDCEF;
  color: #fff;
  border-radius: 4px;
  font-weight: bold;
  text-align: center;
  display: block;
}

.line{
  padding: 5px 0;
  margin: 1rem;
  width: 7rem;
  background: #99EA9C;
  color: #fff;
  border-radius: 4px;
  font-weight: bold;
  text-align: center;
  display: block;
}

.discord{
  padding: 5px 0;
  margin: 1rem;
  width: 7rem;
  background: #CC9CEF;
  color: #fff;
  border-radius: 4px;
  font-weight: bold;
  text-align: center;
  display: block;
}

.news{
  padding: 5px 0;
  margin: 1rem;
  width: 7rem;
  background: #EF9CCD;
  color: #fff;
  border-radius: 4px;
  font-weight: bold;
  text-align: center;
  display: block;
}

.center{
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.wrap{
  width: 100%;
  height: auto;
}

.youtube {
  position: relative;
  padding-bottom: 56.25%; /* 16:9の場合*/
  height: 0;
  overflow: hidden;
}
.youtube iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.lyric_next{
  padding: 0 0 10px 0;
}

footer{
  padding: .5rem;
  font-size: 75%;
  position: relative;
}
footer p{
  text-align: center;
  color: #333;
}

.arrow-next{
  display: inline-block;
  display: block;
  padding-right: 10px;
  color: #333;
  text-decoration: none;
  list-style-type: disc
}
.arrow-next:before {
  content: '';
  width: 6px;
  height: 6px;
  border: 0;
  border-top: solid 1px #333;
  border-right: solid 1px #333;
  position: absolute;
  top: 50%;
  right: 0;
  margin-top: -4px;
  transform: rotate(45deg);
}

@media screen and (min-width: 600px) {

  #nav{
    display: none;
    visibility: hidden;
  }

  nav {
    padding: 0;
    opacity: 1;
    visibility: inherit;
    z-index: 998;
  }
  #navigation{
    background: none;
    height: 3.5rem;
    width: auto;
    transform: translate(200%, 0);
    animation: .8s cubic-bezier(0.170, 0.935, 0.305, 1.000) 4.5s navigation forwards;
  }
    @keyframes navigation {
      from{
        transform: translate(200%, 0);
      }
      to{
        transform: translate(0, 0);
      }
    }
  #navigation ul{
    top: 50%;
    left: auto;
    right: 0;
    transform: translate(0, -50%);
  }
  #navigation ul li{
    text-align: left;
  }

  nav ul {
    padding-left: 0;
    list-style: none;
    display: flex;
    flex-direction: flex-end;
    align-items: center;
  }

  nav ul li{
    margin: 0 1rem 0 0;
  }

  nav ul li a{
    font-weight: normal;
    letter-spacing: 0;
    font-size: 100%;
    padding-top: 0;
    color: #fff;
    text-align: center;
  }

  #toEN{
    padding: 5px 0;
    margin: 0;
    width: 4rem;
    color: #fff;
    border-radius: 20px;
  }

  article{
    width: 90%;
    margin: 50px auto;
  }

  h1{
    margin: 2rem;
    font-size: 24px;
    letter-spacing: 8px;
    text-align: center;
  }

  h3{
    margin: 2rem 0 1rem;
    font-size: 23px;
    letter-spacing: 3px;
    text-align: left;
  }

  p, blockquote, ul, ol, dl, li, table, pre {
    margin: 5px 0;
    font-size: 93%;
    letter-spacing: 3px;
  }

  table{
    margin: 1rem auto;
  }

  audio{
    margin: 1rem auto;
  }

  #top h1{
    font-size: 30px;
    }

  #home h1{
    font-size: 30px;
  }

  #what{
    margin: 100vh auto 50px auto;
  }

  #what p{
    width: 80%;
    display: block;
    margin: 0 auto;
  }

  #youtube h3{
    font-size: 24px;
    text-align: center;
  }

  .sns{
    display: flex;
    align-items: center;
  }

  #youtubeSns{
    display: flex;
    justify-content: flex-end;
  }

  #youtube .twitter{
    margin: 1rem .5rem 1rem 1.5rem;
  }

  #youtube .line{
    margin: 1rem 1.5rem 1rem .5rem;
  }

  #missionImage h2{
    font-size: 30px;
    letter-spacing: 2px;
  }

  #mission p{
    width: 65%;
    padding: 0 0 4rem 0;
    display: block;
    margin: 0 auto;
  }

  #nft h2{
    letter-spacing: 3px;
    line-height: 33px;
  }

  #nft h5{
    font-size: 20px;
  }
/*
  #nft p{
    width: 80%;
    display: block;
    margin: .5rem auto;
  }
*/

  .collabText p{
    margin: 1rem 0 0 0;
  }

  #nftUl{
    width: 80%;
  }

  #nftDeadline{
    padding: 1rem 0;
  }
}

@media screen and (min-width: 1024px) {

  h1{
    font-size: 38px;
    letter-spacing: 10px;
  }

  h3{
    font-size: 24px;
    letter-spacing: 5px;
  }

  p, blockquote, ul, ol, dl, li, table, pre {
    margin: 5px 0;
    font-size: 95%;
    letter-spacing: 4px;
  }

  #what p {
    width: 80%;
  }

  #youtubeWidth{
    width: 70%;
    margin: 0 auto;
  }

  #youtube h3{
    font-size: 36px;
    padding: .5rem 0 3rem 0;
  }

  #youtube .sns{
    padding: 0 10% 0 0
  }

  #missionImage h2{
    font-size: 36px;
  }

  #mission section{
    display: flex;
    justify-content: space-between;

  }

  #mission div{
    width: 30%;
  }

  #second.fadein{
    transition-delay: .4s;
  }

  #future.fadein{
    transition-delay: .8s;
  }

/*
  #nft p{
    margin: 1rem auto;
  }
*/

  .collabText p{
    width: 275px;
  }

  #snsBtn p{
    margin: 2rem auto;
  }

  .twitter{
    width: 10rem;
  }

  .line{
    width: 10rem;
  }

  .discord{
    width: 10rem;
  }

  .news{
    width: 10rem;
  }

}