@charset "utf-8";

#drawernav{
    display:block;
			position: fixed;
			top: 0;
            bottom: 0;
            overflow-y: auto;
			right: -100%;
			width: 100%;
			height: 100%;
			background: #222222;
			color: #ddd;
			z-index: 90000;
            padding: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 */
           
           -webkit-transform:translateZ(0);
		}
        
		#drawernav ul.spnav{
            margin-top:70px;
			border-top: #f29178 1px solid;
			overflow: hidden;
}
		#drawernav ul.spnav li{
			width: 50%;
			float: left;
			position: relative;
			border-bottom: #f29178 1px solid;
            text-align:center;
		}
        #drawernav ul.spnav li::before{
			content: "";
			display: block;
			width: 1px;
			height: 100%;
			background-color: #f29178;
			position: absolute;
			left: -1px;
			top: 0;
		}
        #drawernav ul.spnav li a{
			display: block;
			padding: 1em;
            font-size:1.5rem;
			line-height: 1.2;			
			color:#fff;}
        
		#humberger{
            display:block;
            width:32px;
            height:32px;
			padding: 7px 8px 10px;
			background:#222222 url("../images/menubg.svg") 0 0 no-repeat;
			background-size: contain;
			position:fixed;
			top: 19px;
			right: 15px;
			cursor: pointer;
			z-index: 95000;
		}
        @media screen and (max-width: 767px) {
            #humberger{top: 9px; right: 8px;}
        }

        
		.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: #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;}
        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
-------------------------------------------------------*/
#wrapper{ margin-top: 70px;}
header nav{ display:none;}
header{height:70px;}

.spNavHdr{
	height: 70px;
	position: relative;
}
.spNavHdr .logo{
    width:93px;
    height:33px;
    overflow:hidden;
    position:absolute;
	top: 23px;
	left: 25px;
}
.spNavHdr .logo a{
    display:block;
    width:100%;
    height:100%;
    background:url(../images/logo.svg) 0 0 no-repeat;
    background-size:contain;
    overflow:hidden;
    white-space:nowrap;
    text-indent:101%;
    line-height:0;
    font-size:0.1em;
}

.spNavBtn{
	padding: 10px 15px;
	text-align: left;
}
.spNavBtn a{
	color: #dddddd;
	font-size: 1.3rem;
}
.spNavBtn > a{
	display: block;
	border-top: #585858 1px solid;
	padding: 24px 0;
}
.spNavBtn dl,
.spNavBtn > ul{border-top: #585858 1px solid;}

.spNavBtn dl dt{
	padding-top: 24px;
	padding-bottom: 24px;
	font-size: 1.3rem;
	color: #dddddd;
}
.spNavBtn dl dd{
	padding: 0 15px 24px;
}
.spNavBtn dl dd ul + ul{
	margin-top: 18px;
	padding-top: 18px;
	border-top: #585858 1px dotted;}
.spNavBtn dl dd ul li a{
	display: block;
	padding: 12px 0;
}
.spNavBtn > ul > li{border-bottom: #585858 1px solid;}
.spNavBtn > ul > li a{
	display: block;
	padding-top: 24px;
	padding-bottom: 24px;
}

@media screen and (max-width: 767px) {
	#wrapper{ margin-top: 50px;}
	header{height:50px;}
	header h1,
	header .logo,
	.spNavHdr .logo{
		width:72px;
		height:25px;
		top: 15px;
		left: 10px;
	}
}