/* toggle-panel */
#panel-btn {

}
#panel-btn-close{

}

/*
#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 {

}

/***** ���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: 1.0;
	}
	#panel .menu_list ul{
		margin-top:0px;
	}
	#panel .menu_list li{
		float:left;
		width:100%;
		height:50px;
		text-align:center;
		z-index:100;
	}
	#panel .menu_list li .menu_box {
		width:90%;
		height:50px;
		display: block;
		padding-top:0px;
		margin:10px auto 2px auto;
		background-color:#FFF;
		line-height:2.8;
		color:#000;
	}
	#panel .menu_list li .borderbottom{
		height:50px;
		line-height:4.0;
		border-bottom:1px solid #000;
		width:50%;
		margin:0 auto 0;
		text-align:center;
	}

	#panel .menu_list_2{
		width:100%;
		margin:50px auto 0 auto;
		padding:10px 0 20px;
	}
	#panel .menu_list_2 li {
		width:100%;
		margin:0 auto 0;
	}
	#panel .menu_list_2 .menu_list_2_box{
		width:70%;
		margin:0 auto 0;
	}
	#panel .menu_list_2 .menu_box_2{
		float:left;
		width:33%;
		box-sizing: border-box;
	}
	#panel .menu_list_2 .menu_box_2 img{
		width:100%;
	}

	.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%;
		margin:0 auto 0;
		background-color:#000;
	}
	#panel .menu_header{
		position:relative;
		width:82%;
		height:50px;
		margin:0 auto 0;
		padding:0;
		color:#FFF;
	}
	#panel .menu_header .closebtn{
		padding-top:0px;
		padding-left:0px;
		width:12%;
	}
	#panel .menu_header .closebtn img{
		height:50px;
	}
	#panel .menu_title{
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		margin: auto;
		width:36%;
		color:#FFF;
		z-index:10;
	}
	#panel .menu_title img{
		margin: 0;
		padding: 0px;
		width:100%;
		max-height:100px;
	}


}@media all and (min-width: 781px){
	#panel{
		background-color:#FFF;
		position:fixed;
		top:0px;
		right:0;
		height:60%;
		width:100%;
		z-index:200;
		opacity: 1.0;
	}
	#panel .menu_list{
		margin-top:10px;
		margin-bottom:50px;
		padding-bottom:50px;
	}
	#panel .menu_list ul{
	}
	#panel .menu_list li{
		float:left;
		width:100%;
		height:50px;
		text-align:center;
	}
	#panel .menu_list .borderbottom{
		height:50px;
		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;
		line-height:2.0;
		color:#000;
	}

	#panel .menu_list_2{
		width:100%;
		margin:50px auto 0 auto;
		padding:10px 0 20px;
	}
	#panel .menu_list_2 li {
		width:100%;
		margin:0 auto 0;
	}
	#panel .menu_list_2 .menu_list_2_box{
		width:30%;
		margin:0 auto 0;
	}
	#panel .menu_list_2 .menu_box_2{
		float:left;
		width:33%;
		box-sizing: border-box;
	}
	#panel .menu_list_2 .menu_box_2 img{
		width:100%;
	}
	
	
	.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%;
		margin:0 auto 0;
		background-color:#000;
	}
	#panel .menu_header_box{
		width:100%;
		max-width:980px;
		margin:0 auto 0;
	}
	#panel .menu_header{
		position:relative;
		width:83%;
		height:104px;
		margin:0 auto 0;
		padding:0;
		color:#FFF;
	}
	#panel .menu_header .closebtn{
		padding-top:0px;
		padding-left:0px;
		width:12%;
	}
	#panel .menu_header .closebtn img{
		height:104px;
	}
	#panel .menu_title{
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		margin: auto;
		width:20%;
		max-width:300px;
		color:#FFF;
		z-index:10;
	}
	#panel .menu_title img{
		margin: 0;
		padding: 0px;
		width:100%;
		max-height:100px;
	}
}