@charset "utf-8";

#drawernav{
    display:block;
			position: fixed;
			top: 0;
            bottom: 0;
            overflow-y: auto;
			/*pointer-events: none;*/
			top: -100%;
			width: 100%;
			height: 100%;
			opacity: 0;
			background: #fff url("../images/bg_menu.jpg") top right no-repeat;
			background-size: cover;
			color: #221815;
			z-index: 90000;
			-webkit-transition: all 600ms cubic-bezier(1.000, 0.000, 0.000, 1.000); 
			   -moz-transition: all 600ms cubic-bezier(1.000, 0.000, 0.000, 1.000); 
			     -o-transition: all 600ms cubic-bezier(1.000, 0.000, 0.000, 1.000); 
			        transition: all 600ms cubic-bezier(1.000, 0.000, 0.000, 1.000); /* easeInOutExpo */

			-webkit-transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000); 
			   -moz-transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000); 
			     -o-transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000); 
			        transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000); /* easeInOutExpo */
           
           -webkit-transform:translateZ(0);
			transition: top 0.2s;
			transition: opacity 0.8s;
		}
        
		#humberger{
            display:block;
            width:80px;
            height:60px;
			padding: 20px 30px 10px;
			position:absolute;
			right: 20px;
			top: 25px;
			cursor: pointer;
			z-index: 95000;
		}
	.pc	#humberger:hover{opacity: 0.8;}
        @media screen and (max-width: 767px) {		
			#humberger{
				right: 0;
				top: 0;
			}
        }

		.icon-bar{
			height: 2px;
			background: #171313;
			display: block;
			margin-bottom: 5px;
			-webkit-transition: all 400ms cubic-bezier(1.000, 0.000, 0.000, 1.000); 
			   -moz-transition: all 400ms cubic-bezier(1.000, 0.000, 0.000, 1.000); 
			     -o-transition: all 400ms cubic-bezier(1.000, 0.000, 0.000, 1.000); 
			        transition: all 400ms cubic-bezier(1.000, 0.000, 0.000, 1.000); /* easeInOutExpo */

			-webkit-transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000); 
			   -moz-transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000); 
			     -o-transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000); 
			        transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000); /* easeInOutExpo */
		}
		.fixed-content{
			right: inherit;
			width: 100%;
			z-index: 2;
			-webkit-transition: all 400ms cubic-bezier(1.000, 0.000, 0.000, 1.000); 
			   -moz-transition: all 400ms cubic-bezier(1.000, 0.000, 0.000, 1.000); 
			     -o-transition: all 400ms cubic-bezier(1.000, 0.000, 0.000, 1.000); 
			        transition: all 400ms cubic-bezier(1.000, 0.000, 0.000, 1.000); /* easeInOutExpo */

			-webkit-transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000); 
			   -moz-transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000); 
			     -o-transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000); 
			        transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000); /* easeInOutExpo */
		}
		 #overlay{
             display:block;
			z-index:-1;
			opacity: 0;
			background: #fff;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			position: fixed;
			-webkit-transition: all 400ms cubic-bezier(1.000, 0.000, 0.000, 1.000); 
			   -moz-transition: all 400ms cubic-bezier(1.000, 0.000, 0.000, 1.000); 
			     -o-transition: all 400ms cubic-bezier(1.000, 0.000, 0.000, 1.000); 
			        transition: all 400ms cubic-bezier(1.000, 0.000, 0.000, 1.000); /* easeInOutExpo */

			-webkit-transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000); 
			   -moz-transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000); 
			     -o-transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000); 
			        transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000); /* easeInOutExpo */
		}
    
    /**
    * ドロワー開放時のスタイル
    **/
        body.drawer-opened .fixed-content{
            top:0;
        }
        body.drawer-opened #drawernav{
			top: 0;
			opacity: 1;
        }
        body.drawer-opened #humberger{position:fixed;}
        body.drawer-opened #humberger .icon-bar{
            background: #171313;
        }
        body.drawer-opened #humberger :nth-child(1){
            transform:translate(0,10px) rotate(45deg);
            -webkit-transform:translate(0,10px) rotate(45deg);
        }
        body.drawer-opened #humberger :nth-child(2){
            transform:translate(-20px ,0);
            -webkit-transform:translate(-20px ,0);
            opacity:0;
        }
        body.drawer-opened #humberger :nth-child(3){
            transform:translate(0,-4px) rotate(-45deg);
            -webkit-transform:translate(0,-4px) rotate(-45deg);
        }
        body.drawer-opened #overlay{
            z-index: 3;
            opacity: 0.3;
            left: -100%;
        }

		body.drawer-opened #page-top{ display:none !important;}
/*menu
-------------------------------------------------------*/
#drawernav nav{
	text-align: left;
	height: calc(100vh - 110px);
	padding: 0 50px;
	position: relative;
}
#drawernav nav .inner {
	height: 36em;	
	position: absolute;
	top: -100px;
	bottom: 0;
	margin-top: auto;
	margin-bottom: auto;
}

#drawernav nav .navL{margin-left: 140px;}
#drawernav nav .navL,
#drawernav nav .navR{
	width: 300px;
	float: left;
	position: relative;
}

#drawernav nav ul.nav01 li,
#drawernav nav ul.nav02 li,
#drawernav nav ul.nav03 li{
	font-size: 	1.500em;
	letter-spacing: 0.015em;
}

#drawernav nav .nav-top::after {
  content: "";
  display: block;
  clear: both;
}
#drawernav nav .nav-bottom {
	text-align: center;
	margin: 1.5em auto 0;
}

#drawernav nav ul.nav01 li a,
#drawernav nav ul.nav02 li a,
#drawernav nav ul.nav03 li a{
	display: block;
	padding-bottom: 1.6em;
}
#drawernav nav ul.navSns{
	width: 135px;
	max-width: 100%;
	margin: 2em auto 0;
	overflow: hidden;
}
#drawernav nav ul.navSns li{
	width: 33.333%;
	float: left;
	padding-right: 5px;
}
#drawernav nav ul.navSns li a{
	display: block;
	width: 40px;
	max-width: 100%;
	height: 33px;
    overflow:hidden;
    white-space:nowrap;
    text-indent:101%;
    line-height:0;
    font-size:0.1em;
}
.pc	#drawernav nav ul.navSns li a:hover{opacity: 0.8;}
#drawernav nav ul.navSns li.navYoutube a{
	background:url( "../images/ico_youtube.svg") 50% 50% no-repeat;
	background-size:25px auto;
}
#drawernav nav ul.navSns li.navInstagram a{
	background:url( "../images/ico_insta.svg") 70% 100% no-repeat;
	background-size:22px auto;
}
#drawernav nav ul.navSns li.navFacebook a{
	background:url( "../images/ico_fb.svg") 50% 90% no-repeat;
	background-size:12px auto;
}

@media screen and (max-width: 767px) {
	#drawernav{
		background: #fff url("../images/bg_menu_sp.jpg") center top no-repeat;
		background-size: cover;
	}
	#drawernav nav{
		height: calc(100vh - 60px);
		padding: 0 15px;
	}
	#drawernav nav .inner{
		height:auto;
		padding-top: 50px;
		position:static;
	}
	#drawernav nav .navL,
	#drawernav nav .navR{
		width: 50%;
		float: left;
		}
	#drawernav nav .navL{margin-left: 0; padding-left: 10%;}
	#drawernav nav .navR{padding-left: 7%;}
	#drawernav nav ul.nav01 li,
	#drawernav nav ul.nav02 li,
#drawernav nav ul.nav03 li{	font-size: 	1.5rem;}
	#drawernav nav ul.nav01 li a,
	#drawernav nav ul.nav02 li a,
	#drawernav nav ul.nav03 li a{
		padding-bottom: 4rem;
	}
}