@charset "utf-8";
/* CSS Document */
/*========= ナビゲーションのためのCSS ===============*/
#g-nav {
  /*position:fixed;にし、z-indexの数値を大きくして前面へ*/
  position: fixed;
  z-index: 999;
  /*ナビのスタート位置と形状*/
  bottom: -120%;
  left: 0;
  width: 100%;
  height: 100vh; /*ナビの高さ*/
  background-image: url("../images/moon@2x.png");
  background-size: cover;
  /*動き*/
  transition: all 0.6s;
}
/*アクティブクラスがついたら位置を0に*/
#g-nav.panelactive {
  bottom: 0;
}
/*ナビゲーションの縦スクロール*/
#g-nav.panelactive #g-nav-list {
  /*ナビの数が増えた場合縦スクロール*/
  position: fixed;
  z-index: 999;
  /*  width: calc(100%-48px);*/
  height: 100vh; /*表示する高さ*/
  width: 84%;
  margin: 115% 8% 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  justify-content: space-between;
}
/*ナビゲーション*/
.g-nav__ul {
  /*ナビゲーション天地中央揃え*/
  z-index: 999;
}
.nav__left {
  flex-basis: 45%;
}
.nav__right {
  flex-basis: 55%;
  background-color: #fbfbfb;
  border: 4px dotted #85CCFB;
  border-radius: 20px;
  height: 200px;
  padding: 8px;
}
/*リストのレイアウト設定*/
.g-nav__li {
  list-style: none;
  text-align: left;
}
.nav__tool__title {
  position: relative;
  padding: 0 0 .1em 2em;
  border-bottom: 1px solid #ff5a5f;
}
.nav__tool__title::before, .nav__tool__title::after {
  position: absolute;
  content: '';
  border-radius: 100%
}
.nav__tool__title::before {
  top: .2em;
  left: .2em;
  width: 18px;
  height: 18px;
  background-color: rgba(242, 170, 171, .5);
  z-index: 2;
}
.nav__tool__title::after {
  top: .7em;
  left: .7em;
  width: 13px;
  height: 13px;
  background-color: rgba(242, 170, 171, .2);
}
.g-nav__a {
  color: #fbfbfb;
  text-decoration: none;
  padding: 2px;
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: bold;
  font-size: 1.5rem;
}
.nav__right a {
  color: #111;
}
@media(min-width:600px) {
  #g-nav {
    background-image: url("../images/moon_pc2.png");
  }
  #g-nav.panelactive #g-nav-list {
    margin: 27% 10% 0;
    justify-content: normal;
  }
  .g-nav__ul {
    top: 75%;
    left: 15%;
    flex-basis: 170px;
  }
  .g-nav__li {
    text-align: left;
  }
}
@media(min-width:1750px) {
  #g-nav.panelactive #g-nav-list {
    margin-top: 32%;
  }
}