@charset "utf-8";

#drawernav{
    display:block;
			position: fixed;
			top: 0;
            bottom: 0;
            overflow-y: auto;
			right: -100%;
			width: 100%;
			height: 100%;
			background: #fff;
			color: #555555;
			z-index: 90000;
            padding:20px 15px;
			-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);
		}
       
		#humberger{
            display:block;
            width:50px;
            height:60px;
			padding: 20px 15px 10px;
			position:absolute;
			top: 24px;
			right: 15px;
			z-index: 3;
			cursor: pointer;
			z-index: 95000;
		}
        @media screen and (max-width: 767px) {
            #humberger{top: 2px; right: 0;}
        }

        
		.icon-bar{
			height: 2px;
			background: #555555;
			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{
            left: -100%;
        }
        body.drawer-opened #drawernav{
            right: 0;
        }
        body.drawer-opened #humberger{position:fixed; background-color:#fff;}
        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
-------------------------------------------------------*/
header{
    height:100px;
}
header nav{ display:none;}

#drawernav .logo{
    display:block;
    background:url(../images/logo.svg) 50% 50% no-repeat;
    background-size:contain;
    width:125px;
    height:69px;
    overflow:hidden;
    white-space:nowrap;
    text-indent:101%;
    line-height:0;
    font-size:0.1em;
	margin: 0 auto;	
}

#drawernav .spNav{
	padding: 30px 15px 0;
}
        
#drawernav ul{ overflow: hidden;}
#drawernav ul li{
	width: 50%;
	float: left;
	text-align:center;
	font-size:1.8rem;
}
#drawernav ul li a{
	display: block;
	padding: 1.5rem 0;
	text-align: center;
	color:#555;
}
#drawernav ul li.icInsta{padding-top: 1.3rem;}
#drawernav ul li.icInsta a{
	width: 20px;
	height: 20px;
	background: url("../images/ico_insta.svg") 50% 50% no-repeat;
    background-size:contain;
    overflow:hidden;
    white-space:nowrap;
    text-indent:101%;
    line-height:0;
    font-size:0.1em;
	margin: 0 auto;		
}

@media screen and (max-width: 767px) {
    header{
    height:60px;
	}
    header .logo,
    header h1{
        width:67px;
        height:37px;
    }
	#drawernav .logo{
        width:67px;
        height:37px;
	}
}