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

/*アクティブになったエリア*/
#drawer-nav.panelactive{
    position:fixed;
    z-index: 999;
	top: 0;
	width:100%;
    height: 100vh;
}

/*円の拡大*/
#drawer-bg{
    position: fixed;
	z-index:3;
    width: 100px;/*円の形*/
    height: 100px;/*円の形*/
    border-radius: 50%;/*円の形*/
    background: rgba(255,210,210,0.75);/*円の色*/
	transform: scale(0);
	left:-50px;/*円のスタート位置*/
    bottom:-50px;/*円のスタート位置*/
    transition: all 0.6s;/*アニメーションの時間0.6秒*/
}

#drawer-bg.circleactive{
	transform: scale(50);
}

/*ナビゲーションメニュー*/
#drawer-nav ul {
	opacity: 0;/*透過0でスタート*/
    position: absolute;
    z-index: 999;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
}

/*円の背景の後でナビゲーションを表示*/
#drawer-nav.panelactive ul {
    opacity:1;
}

#drawer-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% {
opacity: 0;
}
100% {
opacity: 1;
}
}


/*リストの設定*/
#drawer-nav li{
	text-align: center; 
	list-style: none;
}

#drawer-nav li a{
    font-size: 14px;
	color: #333;
	text-decoration: none;
	padding:10px;
	display: block;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-weight: bold;
}


/* メニューボタン */
#menubtn{
	position:fixed;
	bottom:10px;/* ボタンの位置 */
	left: 10px;/* ボタンの位置 */
	z-index: 9999;
	cursor: pointer;
    width: 50px;/* ボタンのサイズ */
    height:50px;/* ボタンのサイズ */
}
}