@charset "UTF-8";
/* CSS Document */

@media screen and (max-width: 480px){
	#humberger,#drawernav{
	display: block;
}

	
		#drawernav{
			position: fixed;
			top: 0;
			right: -240px;
			width: 240px;
			height: 100%;
			background: #999;
			color: #fff;
			z-index: 1;
			padding-top: 60px;
			-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 */
		}
		#drawernav ul{
			list-style: none;
			padding: 0;
		}
		#drawernav ul li{
			font-size:14px;
		}
		#drawernav ul li a{
			color: #fff;
			display: block;
			padding: 15px 20px;
			text-decoration: none;
		}
		#drawernav ul li a:hover{
			color: #ddd;
			background: #222;
		}
		#drawernav h4{
			padding: 0 15px; 
			margin-bottom:25px;
			color:#666;
		}
		
		
		#humberger{
			position: absolute;
			top: 30px;
			right: 5px;
			z-index: 3;
			width: 40px;
			padding: 17px 10px 10px;
			cursor: pointer;
		}
		#humberger p.op{
			font-size:12px;
			text-align:center;
			margin:5px 0;
		}
		#humberger p.close{
			display:none;
		}
		.icon-bar{
			height: 2px;
			background: #333;
			display: block;
			margin-bottom: 6px;
			-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 #page{
				left: -240px;
				box-shadow: 1px 0 2px #000;
				-webkit-box-shadow: 1px 0 2px #000;
			}
			body.drawer-opened .fixed-content{
				left: -240px;
			}
			body.drawer-opened #drawernav{
				right: 0;
			}
			body.drawer-opened #humberger .icon-bar{
				background: #fff;
			}
			body.drawer-opened #humberger{
				position:fixed;
			}
			body.drawer-opened #humberger p.op{
				display:none;
			}
			body.drawer-opened #humberger p.close{
				display:block;
				font-size:12px;
				text-align:center;
				margin:5px 0;
				color:#FFF;
			}
			body.drawer-opened #humberger :nth-child(1){
				transform:translate(0,8px) rotate(45deg);
				-webkit-transform:translate(0,8px) 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,-8px) rotate(-45deg);
				-webkit-transform:translate(0,-8px) rotate(-45deg);
			}
			body.drawer-opened #overlay{
				z-index: 3;
				opacity: 0.3;
				left: -240px;
			}
		}