/* toggle-panel */
#panel-btn {
	display: inline-block;
	position: relative;
	float:left;
	width: 46px;
	height: 46px;
	margin-top:-5px;
	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: 56%; left: 50%; width: 30px; height: 4px; margin: -5px 0 0 -16px; background: #000; transition: .2s; }
#panel-btn-icon:before, #panel-btn-icon:after { display: block; content: ""; position: absolute; top: 40%; left: 50%; width: 30px; height: 4px; margin-left: -15px; background: #000; 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); }

#panel-btn p{
	padding-top:20px;
}

/***** ���j���[ *****/
@media all and (min-width: 0px)and (max-width: 780px){
	#panel{
		background-color:#FFF;
		position:fixed;
		top:0px;
		right:0;
		height:90%;
		width:100%;
		z-index:200;
		opacity: 0.9;
	}
	#panel .menu_list ul{
		margin-top:0px;
	}
	#panel .menu_list li{
		float:left;
		width:100%;
		height:50px;
		text-align:center;
	}
	#panel .menu_list li .menu_box {
		width:90%;
		height:50px;
		display: block;
		padding-top:0px;
		margin:10px auto 2px auto;
		background-color:#FFF;
		font-size:1.8rem;
		line-height:2.8;
		color:#000;
	}
	#panel .menu_list li .borderbottom{
		height:50px;
		font-size:1.8rem;
		line-height:4.0;
		border-bottom:1px solid #000;
		width:50%;
		margin:0 auto 0;
		text-align:center;
	}
	.menu_style_box{
		color:#c8bb9b;
		padding-right:10px;
		font-weight:bold;
	}
	.menu_style_box img{
		height:40px;
		padding-top:5px;
	}
	#panel .menu_box{
		width:100%;
		background-color:#000;
	}
	#panel .menu_title{
		width:100%;
		height:70px;
		margin:0 auto 0;
		border-bottom:solid 1px #000;
	}
	#panel .menu_title .menulogo{
		float:left;
		width:50%;
		padding-top:13px;
	}
	#panel .menu_title .menulogo img{
		margin: 0 0 0 10px;
		padding: 0;
		vertical-align: bottom;
		height:46px;
	}
	#panel .menu_title .closebtn{
		float:right;
		width:40px;
		margin-top:12px;
		margin-right:10px;
	}
	#panel .menu_title .closebtn img{
		width:100%;
	}
}@media all and (min-width: 781px){
	#panel{
		background-color:#FFF;
		position:fixed;
		top:0px;
		right:0;
		height:50%;
		width:100%;
		z-index:200;
		opacity: 0.9;
	}
	#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 .borderbottom{
		height:50px;
		font-size:2.1rem;
		line-height:3.0;
		border-bottom:1px solid #000;
		width:50%;
		margin:0 auto 0;
		text-align:center;
	}
	#panel .menu_list li .menu_box {
		width:90%;
		max-width:900px;
		height:40px;
		display: block;
		margin:20px auto 2px auto;
		background-color:#FFF;
		font-size:2.1rem;
		line-height:2.0;
		color:#000;
	}
	.menu_style_box{
		color:#c8bb9b;
		padding-right:10px;
		font-weight:bold;
	}
	.menu_style_box img{
		height:40px;
		padding-bottom:11px;
	}
	#panel .menu_box{
		width:100%;
		background-color:#000;
	}
	#panel .menu_title{
		width:90%;
		height:100px;
		max-width:980px;
		margin:0 auto 0;
		color:#FFF;
	}
	#panel .menu_title .menulogo{
		float:left;
		width:50%;
		padding-top:16px;
	}
	#panel .menu_title .menulogo img{
		margin: 0;
		padding: 0;
		vertical-align: bottom;
		height:70px;
	}
	#panel .menu_title .closebtn{
		float:right;
		width:50px;
		margin-top:26px;
		margin-right:16px;
	}
	#panel .menu_title .closebtn img{
		margin: 0;
		padding: 0px;
		width:100%;
	}
}