@charset "utf-8";
#drawernav, #humberger {
	display: none;
}

@media only screen and (max-width:999px) {
	#page {
		padding-top: 50px;
		position: relative;
		z-index: 999;
		left: 0;
		background: #fff;
		-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 {
		display: block;
		overflow-y: scroll;
		position: fixed;
		top: 0;
		right: -240px;
		width: 240px;
		height: 100%;
		background: #fff;
		color: #000;
		z-index: 995;
		padding-top: 70px;
		-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 {
		border-bottom: 1px solid #ccc;
	}
	#drawernav ul li a::before {
		font-family: "Font Awesome 5 Free";
		font-weight: 900;
		content: "\f105";
		padding: 0 5px 0 0;
		color: var(--mainColor, #636363);
	}
	#drawernav ul li a.gmc::before {
		font-family: "Font Awesome 5 Free";
		font-weight: 900;
		content: "\f107";
	}
	#drawernav ul li ul {
		margin: 0 0 0 20px;
	}
	#drawernav ul li ul li:last-child {
		border-bottom: none;
	}
	#drawernav ul li a {
		color: #000;
		display: block;
		padding: 10px;
		text-decoration: none;
	}
	#drawernav ul li a:hover {
		background: var(--mainColorLight, rgba(99,99,99,0.1));
	}
	#drawernav h4 {
		padding: 0 15px;
	}
	#humberger {
		position: fixed;
		top: 5px;
		right: 5px;
		z-index: 997;
		cursor: pointer;
		box-sizing: border-box;
		display: none;
		display: block;
		width: 60px;
	}
	.drawer-opened #humberger {
		background: #999;
	}
	.humbergerMenu {
		width: 60px;
		height: 60px;
		display: flex;
		align-items: center;
		justify-content: center;
		background: var(--mainColor, #636363);
		color: #fff;
		text-align: center;
		font-size: 1.2rem;
		border: 1px solid #fff;
	}
	.humbergerMenu::before {
		content: "MENU";
	}
	.drawer-opened .humbergerMenu::before {
		font-family: "Font Awesome 5 Free";
		font-weight: 900;
		content: "\f00d";
	}
	.fixed-content {
		right: inherit;
		width: 100%;
		z-index: 996;
		-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 {
		z-index: -1;
		opacity: 0;
		background: #000;
		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 #page {
		left: -240px;
		-webkit-box-shadow: 1px 0 2px #000;
		box-shadow: 1px 0 2px #000;
	}
	body.drawer-opened .fixed-content {
		left: -240px;
	}
	body.drawer-opened #drawernav {
		right: 0;
	}
	#gmenu {
		display: none;
	}
	#humberger {
		display: block;
	}
	body.drawer-opened #humberger .icon-bar {
		background: #fff;
	}
	body.drawer-opened #overlay {
		z-index: 997;
		opacity: 0.6;
		left: -240px;
	}

	/*drawer の開閉*/
	#drawernav ul li.menu-item-has-children ul { display: none; }
    #drawernav ul li.menu-item-has-children > a {
        padding-right: 30px;
		position: relative;
    }
	#drawernav ul li.menu-item-has-children > a:after {
		font-family: "Font Awesome 5 Free";
		font-weight: 400;
		content: "\f0fe";
		padding: 0 5px 0 0;
        position: absolute;
		font-size: 2.0rem;
		right: 0;
        top: 7px;
	}
	#drawernav ul li.menu-item-has-children > a.active:after {
		content: "\f146";
	}
}