レスポンシブデザイン

<div class="openbtn">
          <span></span>
          <span>MENU</span>
          <span></span>
        </div>
        <!-- openbtn -->

        <div id="sp-main-nav">
          <nav id="g-nav">
            <div id="g-nav-list">
              <ul>
                <li class="current">
                  <a href="#">
                    トップ
                  </a>
                </li>
                <!-- current -->

                <li><a href="#">お品書き</a></li>

                <li><a href="#">こだわり</a></li>

                <li><a href="#">交通アクセス</a></li>
              </ul>
            </div>
            <!-- #g-nav-list -->
          </nav>
          <!-- #g-nav -->

          <dl>
            <dt>ご予約・お問い合わせ</dt>
            <dd><a href="#">03-1234-5678</a></dd>
          </dl>

          <div class="circle-bg"></div>
        </div>
        <!-- #sp-main-nav -->

         <div id="pc-main-nav">
          <ul>
            <li class="current">
              <a href="#">
                トップ
              </a>
            </li>
            <!-- current -->

            <li><a href="#">お品書き</a></li>

            <li><a href="#">こだわり</a></li>

            <li><a href="#">交通アクセス</a></li>
          </ul>

          <dl>
            <dt>ご予約・お問い合わせ</dt>
            <dd><a href="#">03-1234-5678</a></dd>
          </dl>
        </div>
        <!-- #pc-main-nav -->

@media(min-width: 990px) {
	.openbtn {
		display: none;
	}
}
/*=================================================
            クリックしたら円形背景が拡大（下から）
=================================================*/

/*========= ナビゲーションのためのCSS ===============*/
#g-nav.panelactive {
	width: 100%;
	height: 100vh;
}


@media(min-width: 990px) {
	#g-nav.panelactive {
		display: none;
	}
}


/*丸の拡大*/
.circle-bg {
	position: fixed;
	z-index: 3;

	/*丸の形*/
	width: 100px;
	height: 100px;
	border-radius: 50%;
	background-color: #3e2058;

	/*丸のスタート位置と形状*/
	left: calc(50% - 50px); /*50%から円の半径を引いた値*/
	bottom: -50px;
	transform: scale(0); /*scaleをはじめは0に*/
	transition: all 0.6s; /*0.6秒かけてアニメーション*/
}


@media(min-width: 990px) {
	.circle-bg {
		display: none;
	}
}


.circle-bg.circleactive {
	transform: scale(50); /*クラスが付与されたらscaleを拡大*/
}


/*ナビゲーションの縦スクロール*/
#g-nav-list {
	display: none; /*はじめは表示なし*/

	/*ナビの数が増えた場合縦スクロール*/
	position: fixed;
	z-index: 999;
	width: 100%;
	height: 100vh;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
}

#g-nav.panelactive #g-nav-list {
	display: block; /*クラスが付与されたら出現*/
}


/*ナビゲーション*/
#g-nav ul {
	opacity: 0; /*はじめは透過0*/

	/*ナビゲーション天地中央揃え*/
	position: absolute;
	z-index: 999;
	top: 40%;
	left: 50%;
	transform: translate(-50%, -40%);
}


/*背景が出現後にナビゲーションを表示*/
#g-nav.panelactive ul {
	opacity: 1;
}


/* 背景が出現後にナビゲーション li を表示 */
#g-nav.panelactive ul li {
	animation-name: gnaviAnime;
	animation-duration: 1s;
	animation-delay: 0.2s; /*0.2 秒遅らせて出現*/
	animation-fill-mode: forwards;
	opacity: 0;
}


@keyframes gnaviAnime {
	0% {
		transform: translateY(100px);
		opacity: 0;
	}

	100% {
		transform: translateY(0);
		opacity: 1;
	}
}


/*リストのレイアウト設定*/
#g-nav ul li {
	text-align: center;
}

#g-nav ul li a {
	display: block;
	position: relative;
	color: #fff;
	transition: all 0.3s;
	padding: 15px;
}

#g-nav ul li.current a::before,
#g-nav ul li a:hover::before {
	content: '';

	/*描画位置*/
	position: absolute;
	top: 48%;
	left: 0;

	/*線の形状*/
	width: 10px;
	height: 1px;
	color: #6a2e9e;
	background-color: #fff;
}

#sp-main-nav dl {
	display: none;
}

#sp-main-nav dl a {
	font-size: 1.2rem;
}

#sp-main-nav dl.telactive {
	display: block;
	position: fixed;
	z-index: 9999;
	left: 5%;
	bottom: 30px;
	width: 90%;
	color: #fff;
	border: 1px solid rgba(255, 255, 255, 0.8);
	text-align: center;
	padding: 10px 0;
	animation-name: UpAnime;
	animation-duration: 1s;
	animation-fill-mode: forwards;
}


@media(min-width: 420px) {
	#sp-main-nav dl.telactive {
		left: 20%;
		width: 60%;
	}
}


@media(min-width: 990px) {
	#sp-main-nav dl.telactive {
		display: none;
	}
}




#pc-main-nav {
	display: none;
} 

#pc-main-nav ul {
	display: flex;
}

#pc-main-nav ul li a {
	display: block;
	position: relative;
	color: #333;
	transition: all 0.3s;
	padding: 34px 25px;
}

#pc-main-nav ul li.current a::before,
#pc-main-nav ul li a:hover::before {
	content: '';

	/*描画位置*/
	position: absolute;
	top: 0;
	left: 50%;

	/*線の形状*/
	width: 1px;
	height: 20px;
	background-color: #000;

	/*線の動き1.4秒かけて動く。永遠にループ*/
	animation-name: gnavipathmove;
	animation-duration: 2.4s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
	opacity: 0;
}


/*高さ・位置・透過が変化して線が上から下に動く*/
@keyframes gnavipathmove {
	0% {
		top: 0;
		height: 0;
		opacity: 0;
	}

	30% {
		height: 20px;
		opacity: 1;
	}

	100% {
		top: 30px;
		height: 0;
		opacity: 0;
	}
}


#pc-main-nav dl {
	display: block;
	color: #fff;
	text-align: center;
	background-color: #3e2058;
	padding: 20px 40px;
}

#pc-main-nav dl a {
	font-size: 1.5vw;
	color: #fff;
}


@media(min-width: 990px) {
	#pc-main-nav {
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}
}


#sp-main-nav dl dt,
#pc-main-nav dl dt {
	font-size: 0.8rem;
}

#sp-main-nav dl a,
#pc-main-nav dl a {
	color: #fff;
}