@charset "utf-8";

/*----------------------------- drawer_menu -----------------------------*/
/****************************** all ******************************/
.drawer_menu{
	width:100%;
	background:rgba(0, 0, 0, 0.5);
	position:fixed;
	top:0;
	left:100vw;
	z-index:2147483647;
	overscroll-behavior:contain;
	visibility:hidden;
	opacity:0;
}

.drawer_menu_show{
	right:0;
	bottom:0;
	left:0;
	visibility:visible;
	opacity:1;
}

.drawer_menu_contents{
	color:#fff;
	background:rgba(0, 0, 0, 0.6);
	position:absolute;
	overscroll-behavior:contain;
	visibility:hidden;
	opacity:0;
}

.drawer_menu_contents_show{
	visibility:visible;
	opacity:1;
}

.horizontal_drawer_menu_contents{
	width:95vw;
	max-width:330px;
	top:0;
	bottom:0;
}

.vertical_drawer_menu_contents{
	width:100vw;
	height:80vh;
	left:0;
}

.drawer_menu_inner_parent{
	width:100%;
	height:100%;
	-webkit-overflow-scrolling:touch;
	overflow-scrolling:touch;
	transform:translateZ(0);
	overscroll-behavior:contain;
}

.horizontal_drawer_menu_inner_parent{
	overflow-y:scroll;
	overflow-x:hidden;
}

.vertical_drawer_menu_inner_parent{
	overflow-y:hidden;
	overflow-x:scroll;
}

.drawer_menu_hide_trigger{
	aspect-ratio:1;
	border:solid #fff 2px;
	box-sizing:content-box;
	background:#000;
	position:absolute;
	top:8px;
	right:20px;
	border-radius:50%;
	-webkit-border-radius:50%;
	-moz-border-radius:50%;
}

.drawer_menu_hide_trigger::before, 
.drawer_menu_hide_trigger::after{
	content:"";
	background:#fff;
	position:absolute;
	transform:rotate(45deg);
	display:block;
}
/****************************** /all ******************************/

/****************************** pc ******************************/
@media screen and (min-width:1280px){
	.drawer_menu_hide_trigger{
		width:24px;
	}
	
	.drawer_menu_hide_trigger::before{
		width:2px;
		height:20px;
		top:2px;
		left:calc(50% - 1px);
	}
	
	.drawer_menu_hide_trigger::after{
		width:20px;
		height:2px;
		top:calc(50% - 1px);
		left:2px;
	}
}
/****************************** /pc ******************************/

/****************************** tablet ******************************/
@media screen and (min-width:768px) and (max-width:1280px){
	.drawer_menu_hide_trigger{
		width:2.4vw;
	}
	
	.drawer_menu_hide_trigger::before{
		width:0.2vw;
		height:2.0vw;
		top:0.2vw;
		left:calc(50% - 0.1vw);
	}
	
	.drawer_menu_hide_trigger::after{
		width:2.0vw;
		height:0.2vw;
		top:calc(50% - 0.1vw);
		left:0.2vw;
	}
}
/****************************** /tablet ******************************/

/****************************** sp ******************************/
@media screen and (max-width:768px){
	.drawer_menu_hide_trigger{
		width:8.0vw;
	}
	
	.drawer_menu_hide_trigger::before{
		width:0.4vw;
		height:7.0vw;
		top:0.5vw;
		left:calc(50% - 0.2vw);
	}
	
	.drawer_menu_hide_trigger::after{
		width:7.0vw;
		height:0.4vw;
		top:calc(50% - 0.2vw);
		left:0.5vw;
	}
}
/*----------------------------- /drawer_menu -----------------------------*/