@charset "utf-8";

#drawernav{
    display:block;
			position: fixed;
			top: 0;
            bottom: 0;
            overflow-y: auto;
			right: -100%;
			width: 100%;
			height: 100%;
			background: #222222;
			color: #fff;
			z-index: 90000;
            padding:80px 0 20px;
			-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 */
           
           -webkit-transform:translateZ(0);
		}
        
		#drawernav ul{
            overflow:hidden;
            }
		#drawernav ul li{
            /*border-top:#c6dae3 1px solid;*/
            text-align:center;
            font-size:1.5rem;
            letter-spacing:0.1em;
            position:relative;
		}
        
        #drawernav ul li a{
            display:block;
            padding:2em 10px 0;
            color:#fff;}
        
		#humberger{
            display:block;
            background-color:#222222;
            width:32px;
            height:32px;
			padding: 10px 8px 10px;
			position:absolute;
			top: 24px;
			right: 15px;
			z-index: 3;
			cursor: pointer;
			z-index: 95000;
		}
@media screen and (max-width: 767px) {		
#humberger{
			top: 14px;
		}
}
                
		.icon-bar{
			height: 1px;
			background: #fff;
			display: block;
			margin-bottom: 4px;
			-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: #222222;
			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{
            left: -100%;
        }
        body.drawer-opened #drawernav{
            right: 0;
        }
        body.drawer-opened #humberger{position:fixed; background-color:#fff !important; background:none;}
        body.drawer-opened #humberger .icon-bar{
            background: #222222;
        }
        body.drawer-opened #humberger :nth-child(1){
            transform:translate(0,6px) rotate(45deg);
            -webkit-transform:translate(0,6px) 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
-------------------------------------------------------*/
header{height:80px;}
header nav{ display:none;}
header h1,
header .logo{
    margin:auto auto auto 20px;
}

        #drawernav .lan a{
            display:block;
            padding:2em 10px 0;
            }
        #drawernav .lan a{color:#b4b4b4;}
        #drawernav .lan span{color:#fff;}
header .logoEng {
    /*width: 314px;
    height: 30px;*/
}
@media screen and (max-width: 767px) {
    header{
    width:100%;
    height:60px;
    margin:0 auto;
    }
    
    header h1,
    header .logo{
        margin:auto auto auto 10px;
    }
}