@charset "UTF-8";
/*
	Author: nag-design
	Last Update: 2023-06-14
	Breakpoint: 1024px;
*/
/* ================================

	ドロワーナビ

================================ */
#Drawer { position: fixed; top: 0; right: 0; display: block; box-sizing: border-box; width: 100%; height: 100%; text-align: center; background-color: rgba(0, 0, 0, 0.8); transform: translateX(100%); transition: ease .5s; z-index: 10000; }
@media screen and (min-width: 768px) { #Drawer { display: none; } }
#Drawer #Hamburger { position: absolute; display: block; top: 0; right: 100%; background: none; width: 50px; height: 50px; transition: ease .5s; z-index: 200; cursor: pointer; pointer-events: auto; }
@media screen and (min-width: 768px) { #Drawer #Hamburger { display: none; } }
#Drawer #Hamburger span { position: absolute; height: 2px; width: 22px; background-color: rgba(255, 255, 255, 0.8); transition: ease .5s; }
#Drawer #Hamburger span:nth-child(1) { top: 35%; left: 50%; transform: translate(-50%, -50%); }
#Drawer #Hamburger span:nth-child(2) { top: 50%; left: 50%; transform: translate(-50%, -50%); }
#Drawer #Hamburger span:nth-child(3) { top: 65%; left: 50%; transform: translate(-50%, -50%); }
#Drawer #DrawerMenu { position: absolute; top: 0; left: 0; width: 100%; height: auto; z-index: 199; }

#Drawer.action { width: 100%; transform: translateX(0); }
#Drawer.action #Hamburger { right: calc( 100% - 50px ); pointer-events: auto; }
#Drawer.action #Hamburger span { top: 50%; }
#Drawer.action #Hamburger span:nth-child(1) { transform: translate(-50%, -50%) rotate(225deg); }
#Drawer.action #Hamburger span:nth-child(2) { transform: translate(-50%, -50%); opacity: 0; }
#Drawer.action #Hamburger span:nth-child(3) { transform: translate(-50%, -50%) rotate(-225deg); }
#Drawer.action #DrawerMenu { pointer-events: auto; }

.drawermenu { margin: 50px 0 0 0; }
.drawermenu__navi { margin: 0; border-top: 1px solid rgba(255, 255, 255, 0.2); overflow: hidden; }
.drawermenu__navi li { list-style-type: none; padding: 0; width: 100%; font-size: 1rem; text-align: center; border-bottom: 1px solid rgba(255, 255, 255, 0.2); }
.drawermenu__navi li a { display: block; padding: 1em 0; width: 100%; text-align: center; }
.drawermenu__navi li a li { color: #999; }

main { transition: 500ms ease; z-index: 1; }
main.blur #Drawer { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }

/*# sourceMappingURL=drawer.css.map */