/* toggle-panel */
#panel-btn {
	display: inline-block;
	position: relative;
	float:left;
	width: 40px;
	height: 40px;
	margin-top:-3px;
	margin-right:0px;
	border-radius: 10%;
}
.panel-btn-close{
	width:100%;
	color:#FFF;
	font-size:2.5rem;
}

#panel-btn:hover {
	background: #666;
	opacity:0.7;
}
#panel-btn-icon { display: block; position: absolute; top: 50%; left: 50%; width: 30px; height: 3px; margin: -3px 0 0 -16px; background: #FFF; transition: .2s; }
#panel-btn-icon:before, #panel-btn-icon:after { display: block; content: ""; position: absolute; top: 40%; left: 50%; width: 30px; height: 3px; margin-left: -15px; background: #FFF; transition: .3s; }
#panel-btn-icon:before { margin-top: -12px; }
#panel-btn-icon:after { margin-top: 11px; }


#panel-btn .close { background: transparent; }
#panel-btn .close:before, #panel-btn .close:after { margin-top: 0; }
#panel-btn .close:before { transform: rotate(-45deg); -webkit-transform: rotate(-45deg); }
#panel-btn .close:after { transform: rotate(-135deg); -webkit-transform: rotate(-135deg); }


/***** ���j���[ *****/
@media all and (min-width: 0px)and (max-width: 640px){
	#panel{
		background-color:#FFF;
		position:fixed;
		top:60px;
		right:0;
		height:90%;
		width:100%;
		z-index:200;
		opacity:1.0;
	}
	#panel .menu_list ul{
		margin-top:0px;
	}
	#panel .menu_list .border{
		width:90%;
		margin:0 auto 0;
		height:44px;
		text-align:center;
		border-bottom:solid 1px #666;
	}
	#panel .menu_list .noborder{
		float:left;
		width:100%;
		height:44px;
		text-align:center;
	}
	#panel .menu_list li .menu_box {
		width:90%;
		height:38px;
		display: block;
		padding-top:0px;
		margin:2px auto 2px auto;
		background-color:#FFF;
		font-size:1.6rem;
		line-height:2.8;
		color:#000;
	}
	.menu_style_box{
		color:#c8bb9b;
		padding-right:10px;
		font-weight:bold;
	}
	.menu_style_box img{
		height:40px;
		padding-top:5px;
	}
	#panel .menu_title{
		width:100%;
		height:60px;
		margin:0 auto 0;
	}
	#panel .menu_title .menulogo{
		width:90%;
		margin:20px auto 0 auto;;

	}
	#panel .menu_title .menulogo img{
		width:100%;
	}
}@media all and (min-width: 641px)and (max-width: 900px){
	#panel{
		background-color:#FFF;
		position:fixed;
		top:80px;
		right:0;
		height:70%;
		width:100%;
		z-index:200;
		opacity:1.0;
	}
	#panel .menu_list{

	}
	#panel .menu_list ul{
		margin-top:10px;

	}
	#panel .menu_list li{
		float:left;
		width:100%;
		height:50px;
		text-align:center;
	}
	#panel .menu_list li .menu_box {
		width:90%;
		max-width:900px;
		height:40px;
		display: block;
		margin:2px auto 2px auto;
		background-color:#FFF;
		font-size:2.1rem;
		line-height:2.0;
		color:#000;
		border-bottom:solid 1px #666;
	}
	.menu_style_box{
		color:#c8bb9b;
		padding-right:10px;
		font-weight:bold;
	}
	.menu_style_box img{
		height:40px;
		padding-bottom:11px;
	}
	#panel .menu_title{
		width:100%;
		height:100px;
		max-width:980px;
		margin:0 auto 0;
	}
	#panel .menu_title .menulogo{
		width:90%;
		max-width:900px;
		margin:50px auto 0 auto;
	}
	#panel .menu_title .menulogo img{
		width:100%;
	}
}@media all and (min-width: 901px){
	#panel{
		background-color:#FFF;
		position:fixed;
		top:100px;
		right:0;
		height:70%;
		width:100%;
		z-index:200;
		opacity:1.0;
	}
	#panel .menu_list{

	}
	#panel .menu_list ul{
		margin-top:10px;

	}
	#panel .menu_list li{
		float:left;
		width:100%;
		height:50px;
		text-align:center;
	}
	#panel .menu_list li .menu_box {
		width:90%;
		max-width:900px;
		height:40px;
		display: block;
		margin:2px auto 2px auto;
		background-color:#FFF;
		font-size:2.1rem;
		line-height:2.0;
		color:#000;
		border-bottom:solid 1px #666;
	}
	.menu_style_box{
		color:#c8bb9b;
		padding-right:10px;
		font-weight:bold;
	}
	.menu_style_box img{
		height:40px;
		padding-bottom:11px;
	}
	#panel .menu_title{
		width:100%;
		height:100px;
		max-width:980px;
		margin:0 auto 0;
	}
	#panel .menu_title .menulogo{
		width:90%;
		max-width:900px;
		margin:50px auto 0 auto;
	}
	#panel .menu_title .menulogo img{
		width:100%;
	}
}