/**
* タブレットの場合ドロワー自体を表示しない
**/

@media screen and (min-width: 860px){

#hamburger { display:none; }
#drawernav { display:none; }

}

/**
* スマホの時のドロワーの設定
**/

@media screen and (max-width: 859px){

#mainNAV { display:none; }
#mainPages { display:none; }

.hamburger-back { 
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    height:60px;
    background:#fff;
    z-index: 900; 
    border-bottom: 1px solid #0B568E;
}

.hamburger-back a { display:block; width:200px; margin:0 auto 0 10px; }

#drawernav{
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    transform:translate(0,-100%);
    background: #FBD2DB;
    color: #000000;
    z-index: 98;
    padding-top: 60px; /*#hamburgerのheight以上の数値に設定する*/
    -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 */
	filter:alpha(opacity=100);
	-moz-opacity: 1.00;
	opacity: 1.00;

}
#drawernav .wp-nav { padding:0 10px ; color:#000080; height: 100%; overflow: auto; -webkit-overflow-scrolling: touch; }
#drawernav a { padding-left:5px; color:#000000; }
#drawernav ul { padding:10px 0; margin-bottom:1em; }
#drawernav li { border-bottom:1px solid #666; line-height:40px; font-size:150%; text-align:left; padding:0; margin:0.5em; clear:both; }
#drawernav li:last-child {  }
#drawernav li a { color:#000000; text-decoration:none; font-weight:normal; display:block; }
#drawernav li img { height:40px; float:left; }
#drawernav li h6 { color:#000000; }


/**
* 右上のボタンの設定
**/

		#hamburger{
			position: absolute;
			top: 0;
			right: 0;
                        background:#eb4163;
			width: 60px;
			height:60px;
			padding: 13px 10px 10px;
			cursor: pointer;
			box-sizing: border-box;
		}

		.icon-bar{
			height: 2px;
			width:40px;
			background: #ffffff;
			display: block;
			margin:0 auto 6px auto;
			-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 */
		}

		.open-bar{
			position:absolute;
			bottom:3px;
			left:8px;
			-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 */

		}
		.close-bar{
			position:absolute;
			bottom:3px;
			left:46px;
			opacity:0;
			-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 */

		}

/**
* ドロワー開放時のスタイル
**/

    #hamburger.open {
	
    }
    #drawernav.open{
        transform:translate(0,0);
    }
    #hamburger.open .icon-bar{
        background:#000000;/*バツ印の色を変えたい場合はここに指定する */
    }
    #hamburger.open span:nth-child(1){
        transform:translate(0,8px) rotate(45deg); 
        -webkit-transform:translate(0,8px) rotate(45deg);
        /*translate(0,(.icon-barのheight+margin-bottomの値));に設定する */
    }
    #hamburger.open span:nth-child(2){
        transform:translate(-20px ,0);
        -webkit-transform:translate(-20px ,0);
        opacity:0;
    }
    #hamburger.open span:nth-child(3){
        transform:translate(0,-8px) rotate(-45deg);
        -webkit-transform:translate(0,-8px) rotate(-45deg);
        /*translate(0,-(.icon-barのheight+margin-bottomの値));に設定する */
    }
    #hamburger.open .open-bar{
        transform:translate(-40px ,0);
        -webkit-transform:translate(-40px ,0);
	opacity:0;
   }
    #hamburger.open .close-bar{
        transform:translate(-40px ,0);
        -webkit-transform:translate(-40px ,0);
	opacity:1;
   }

}