@charset "utf-8";

#drawernav{
    display:block;
			position:fixed;
			top: 0;
			right: -100%;
			width: 100%;
			height: 100%;
			background: #2d2d2d;
			color: #fff;
			z-index: 90000;
			padding-top: 40px;
			-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;
			position:absolute;
			top: 0;
			right: 0;
			z-index: 3;
			width: 40px;
			padding: 18px 10px 10px;
			cursor: pointer;
			z-index: 95000;
		}
		.icon-bar{
			height: 2px;
			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: #2d2d2d;
			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;}
        body.drawer-opened #humberger .icon-bar{
            background: #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,-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:50px;
    padding-left:10px;
    padding-right:10px;
}
header nav{ display:none;}

header h1,
header .logo{
    width:134px;
    height:50px;
    max-width:inherit;
}
header h1 a,
header .logo a{
    width:134px;
    height:16px;
    margin:auto auto auto 0;
}

/*drop
-------------------------------------------------------*/

.spnavOuter {
  overflow:auto;
  height:100%;
  padding-top:20px;
}

ul.spnav01{
    border-top:#494949 1px solid;
}
ul.spnav01 > li{
    font-size:1.9rem;
    font-family: 'Open Sans Condensed', sans-serif;
    font-weight:700;
    text-align:left;
    border-bottom:#494949 1px solid;
}
ul.spnav01 > li a{
    display:block;
    padding:1em;
    position:relative;
}

ul.spnav01 > li a.acc::after{
    content:"";
    display:block;
    width:19px;
    height:19px;
    background:url(../images/open.svg) 0 0 no-repeat;
    background-size:contain;
    position:absolute;
    top:50%;
    right:10px;
    margin-top:-10px;
}
ul.spnav01 > li a.acc.active::after{
    background:url(../images/close.svg) 0 0 no-repeat;
    background-size:contain;
}
 #drawernav ul li a{
     color:#fff !important;
 }
 #drawernav ul li .mgnWrap{display:none;}

 #drawernav ul li .mgnWrap{
     background-color:#393939;
 }
 #drawernav ul li .mgnWrap li + li{
    border-top:#494949 1px solid;
 }
  #drawernav ul li .mgnWrap li a{font-size:1.5rem;}


@media screen and (max-width: 767px) {
    
}
@media screen and (max-width: 374px) {
    /*iphone5*/

}