/* バーガー用の親ボックス */
.bargar-nav {
  width: 40px;
  height: 25px;
  position: relative;
  cursor: pointer;
}

/* 3本線の共通のCSS */
.bargar-nav span {
  display: block;
  width: 100%;
  height: 5px;
  position: absolute;
}

/* 3本線のそれぞれのCSS */
.bargar-nav span:nth-child(1) {
  background-color: #f796e2;
}

.bargar-nav span:nth-child(2) {
  background-color: #edf417;
  top: 10px;
}

.bargar-nav span:nth-child(3) {
  background-color: #f796e2;
  bottom: 0;
}


/* 3本線をアニメーションさせてXにさせる */
.nav-toggle span {
  transition: transform 0.6s ease-in-out, top 0.5s ease;
}

/* ナビが開いた後の3本線がXになるため */
/* 線の色を変える */
/* .open .nav-toggle span {
  background-color: #fff;
} */

/* 上から1本目を時計回りに45度回転 */
.open .nav-toggle span:nth-child(1) {
  top: 7px;
  transform: rotate(45deg);
}

/* 2本目はいらないので消すXから戻る時に
ふわっと出るように見せるため元の位置より下にずらす */
.open .nav-toggle span:nth-child(2) {
  top: 14px;
  width: 0;
}

/* 3本目の線、反時計回りに45度回転 */
.open .nav-toggle span:nth-child(3) {
  top: 7px;
  transform: rotate(-45deg);
}

/* 出てくるナビゲーション */

/* 右から出てくるナビゲーションの親ボックスを
画面の右外にはみ出るようにしている */

.gloval-nav {
  background-color: rgba(0, 0, 0, 0.7);
  position: fixed;
  /*ページ右側に固定してスクロールしないように*/
  z-index: 10;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /*固定した要素を上下左右100％にする*/
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  transform: translateX(100%);
  /*画面幅分（100％）右にはみ出させる（移動させる）*/
  /* transition: opacity 0.6s ease, visibility 0.6s ease; */
  transition: 0.5s;
  opacity: 0;
  visibility: hidden;
}

/* 各リンクテキストへの共通のCSS */

.gloval-nav ul li {
  font-size: 1.5em;
  list-style: none;
  opacity: 0;
  /* transform: translateX(200px); */
  /*ナビ全体よりも少し遅れて出すためにさらに200pxずらしている*/
  transition: transform 0.6s ease, opacity 0.2s ease;
}

.gloval-nav a {
  display: block;
  color: #fff;
  padding: 20px 0;
}

.gloval-nav a:hover {
  opacity: 0.7;
}

/* ナビの項目がいっぺんに出てくるのではなく順番に出るように時間に差をつける */
.gloval-nav ul li:nth-child(2) {
  transition-delay: 0.1s;
}

.gloval-nav ul li:nth-child(3) {
  transition-delay: 0.2s;
}

.gloval-nav ul li:nth-child(4) {
  transition-delay: 0.3s;
}

/* クリックした時に.nav-toggleにjsで.openを付けた時のCSS */

/* 非表示にしていた要素を表示させる */
.open {
  overflow: hidden;
}

/* 右側にはみ出ている要素を元の位置に戻す */
.open .gloval-nav {
  visibility: visible;
  transform: translateX(0);
  /* 元の位置に戻す */
  transition: transform 0.6s;
  opacity: 1;
}

/* 各リンクテキストも元の位置に戻るようにしている */
.open .gloval-nav li {
  opacity: 1;
  transform: translateX(0);
  /* 上と同じく元の位置に戻す */
  transition: transform 1s ease, opacity 0.9s ease;
}


/* 出てくるナビの背景よりも上に来るように調整 */
.nav-toggle {
  z-index: 100;
}

@media (width > 800px) {

  /* .nav-toggleを非表示 */


  /* .gloval-navのfixedを解除
  右にずらしたものを戻す
  背景色を消す */

  /* .gloval-nav ulにflexをかけて微調整 */

  /* .gloval-nav li を元の位置に戻す
opacityを1にする
フォントサイズを戻す*/

  /* aの文字の色を白以外にする */



}