/* ハンバーガー */
.hamburger{
  width:30px;
  position:fixed;
  top:30px;
  right:20px;
  cursor:pointer;
  z-index:1001;
}

.hamburger span{
  display:block;
  width:100%;
  height:3px;
  background:#fff;
  margin:6px 0;
  transition:.3s;
  z-index:9999999;
}

/* ×変形 */
.hamburger.active span:nth-child(1){
  transform:translateY(9px) rotate(45deg);
  background:#fff;
}

.hamburger.active span:nth-child(2){
  opacity:0;
}

.hamburger.active span:nth-child(3){
  transform:translateY(-9px) rotate(-45deg);
  background:#fff;
}

/* オーバーレイ */
.overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.8);
  opacity:0;
  visibility:hidden;
  transition:.3s;
}

.overlay.active{
  opacity:1;
  visibility:visible;
}

/* メニュー */
.nav{
  position:fixed;
  top:0;
  right:-100%;
  width:100%;
  height:100vh;
  background:rgba(0,0,0,.8);
  z-index:999;
  transition:.4s;
  display:flex;
  justify-content:center;
  align-items:center;
}

.nav.active{
  right:0;
}

.nav ul{
  position:absolute;
  top:50px;
  list-style:none;
  text-align:left;
}

.nav ul li{
  margin:25px 0;
  opacity:0;
  transform:translateY(20px);
  line-height:1.2;
}
/* 順番にふわっと表示 */
.nav.active ul li{
  animation:fadeUp .6s forwards;
}

.nav.active ul li:nth-child(1){
  animation-delay:.1s;
}

.nav.active ul li:nth-child(2){
  animation-delay:.2s;
}

.nav.active ul li:nth-child(3){
  animation-delay:.3s;
}

.nav.active ul li:nth-child(4){
  animation-delay:.4s;
}

.nav.active ul li:nth-child(5){
  animation-delay:.5s;
}

.nav.active ul li:nth-child(6){
  animation-delay:.6s;
}

.nav.active ul li:nth-child(7){
  animation-delay:.7s;
}

.nav.active ul li:nth-child(8){
  animation-delay:.8s;
}
@keyframes fadeUp{
  to{
    opacity:1;
    transform:translateY(0);
  }
}

.nav a{
  color:#fff;
  text-decoration:none;
  font-size:18px;
  letter-spacing:.1em;
  transition:.3s;
}

.nav a span{
font-size:12px;
}
.nav a.login{
border:solid 1px #ffffff;
padding:5px 20px;
}
.nav a:hover{
  opacity:.7;
}

/* ダミー */
.hero{
  height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
  font-size:48px;
}
/* ==========================
   PCでは非表示
========================== */

.hamburger,
.nav,
.overlay{
  display:none;
}

/* ==========================
   スマホのみ表示
========================== */

@media screen and (max-width: 768px){

  .hamburger{
    display:block;
  }

  .nav{
    display:flex;
  }

  .overlay{
    display:block;
  }

}