@charset "UTF-8";
/* CSS Document */

#wrapper {
    /*オーバーレイをabsolute指定するため必要*/
    position: relative;
 
    /*アニメーションの指定*/
    -webkit-transition: all .4s;
       -moz-transition: all .4s;
         -o-transition: all .4s;
            transition: all .4s;
}
 
#wrapper.open {
    /*クラス「open」が付いたら左に14%移動*/
    -webkit-transform: translate3d(-14%, 0, 0);
       -moz-transform: translate3d(-14%, 0, 0);
            transform: translate3d(-14%, 0, 0);
			-webkit-filter: blur(6px);
			filter: blur(6px);
			
}
 
/* オーバーレイ表示をするためのCSS */
.open .overlay {
    position: absolute;
    top: 0;
    left: 0;
    /*親要素の上に表示するためz-indexを指定*/
    z-index: 9997;
 
    /*親要素一杯に広がるため縦横のサイズを100%に*/
    width: 100%;
    height: 100%;
 
    /*暗くするため黒の透明色を指定*/
    background: rgba(255, 255, 255, .4);
	
}

/* オーバーレイ表示をするためのCSS */
.overlay2 {
	display:none;
    position: fixed;
    top: 0;
    left: 0;
    /*親要素の上に表示するためz-indexを指定*/
    z-index: 9998;
 
    /*親要素一杯に広がるため縦横のサイズを100%に*/
    width: 100%;
    height: 100%;
 
    /*暗くするため黒の透明色を指定*/
    background: rgba(255, 255, 255, .5);
	
}



#drawer {
	z-index: 9999;
    position: fixed; /*//常に固定なのでfixed*/
    top: 0;
    right: -60%;  /*//初期状態では隠すため、横幅のサイズ分だけ画面外に移動する*/
    width: 60%;
    height: 100%;
	   background-color:#503e00;
    overflow-x: hidden;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch; /*//スマホでのスクロールに慣性を付ける（デバイス限定*/
 
    /*//アニメーション指定*/
    -webkit-transition: all .4s;
       -moz-transition: all .4s;
         -o-transition: all .4s;
            transition: all .4s;
}
 
#drawer.open {
    /*//クラス「open」が付いたら左へ280px移動（画面内へ移動し表示される）*/
    -webkit-transform: translate3d(-100%, 0, 0);
       -moz-transform: translate3d(-100%, 0, 0);
            transform: translate3d(-100%, 0, 0);
}

#drawer ul
	{
	background:;
	}

#drawer ul li a
	{
	display:block;
	text-align:center;
	width:100%;
	height:80px;
	line-height:100px;
	font-size:30px;
	color:#fff;
	font-family: 'Dancing Script', cursive;
	letter-spacing: 0.05em;
	text-decoration:none;
	}
	
#drawer ul li a:hover
	{
color:#fff;
background-color:#503e00;
	}
	.mobile_menu{display:none}

/* ▼▼▼▼▼▼▼▼MaxWidth768(tablet)▼▼▼▼▼▼▼▼ */

@media screen and (max-width: 768px) {
	/* ************** */
	.mobile_menu{
	 width:11%;
		display:block;
		position:fixed;
		top:0;
		right:0;
		z-index: 9998;
}
	
	/* *************** */
}

/* ▼▼▼▼▼▼▼▼MaxWidth480(mobile)▼▼▼▼▼▼▼▼ */

@media screen and (max-width: 480px) {
	/* ************** */
	.mobile_menu
	{
	 width:12.8%;
		}
/* *************** */
}