@charset "utf-8";
	#nav-tgl {
		display: none
	}



.drawer-nav-list .sub-menu {
	max-height: 0;
	overflow: hidden;
	transition: max-height .3s ease;
}

.drawer-nav-list .menu-item-has-children.open > .sub-menu {
	max-height: 200px;
}

.drawer-nav-list .menu-item-has-children.open > .sub-menu {
	display: block;
}
@media only screen and (min-width:801px){
	.drawer-menu {
		display: none
	}
}

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

	.drawer-nav-list .sub-menu {
		display: none;
	}

	.drawer-nav-list li.open > .sub-menu {
		display: block;
	}

	.scroll-prevent {
		position: fixed;
		z-index: 99995;
		width: 100%;
		height: 100%
	}

	.nav-tgl-btn {
		cursor: pointer;
		position: fixed;
		top: 0;
		right: 0;
		margin: 0
	}
	.drawer-login {
		padding: 12px
	}
	.open2 {
		z-index: 99999;
		top: 20px;
		width: 36px;
		height: 36px;
		background: #727393;
		transition: background .6s, transform .6s cubic-bezier(.215, .61, .355, 1);
		-webkit-transition: background .6s, -webkit-transform .6s cubic-bezier(.215, .61, .355, 1)
	}
	.open2::before,
	.open2::after {
		content: ""
	}
	.open2 span,
	.open2::before,
	.open2::after {
		content: "";
		position: absolute;
		top: 16px;
		left: 28%;
		width: 40%;
		border-bottom: 2px solid #fff;
		transition: transform .6s cubic-bezier(.215, .61, .355, 1);
		-webkit-transition: -webkit-transform .6s cubic-bezier(.215, .61, .355, 1)
	}
	.open2::before {
		transform: translateY(-6px);
		-webkit-transform: translateY(-6px)
	}
	.open2::after {
		transform: translateY(6px);
		-webkit-transform: translateY(6px)
	}
	.close2 {
		position: fixed;
		inset: 0;
		opacity: 0;
		pointer-events: none;
		transition: 0.3s ease;
		z-index: 99999;
		background: #727393;
	}

	#nav-tgl:checked ~ .close2 {
		opacity: 1;
		pointer-events: auto;
		background: rgba(0,0,0,0.3);
	}
	#nav-tgl:checked + .open2 {
		background: #727393;
		transform: translateX(-290px);
		-webkit-transform: translateX(-290px)
	}
	#nav-tgl:checked + .open2 span {
		transform: scaleX(0);
		-webkit-transform: scaleX(0)
	}
	#nav-tgl:checked + .open2::before {
		transform: rotate(45deg);
		-webkit-transform: rotate(45deg)
	}
	#nav-tgl:checked + .open2::after {
		transform: rotate(-45deg);
		-webkit-transform: rotate(-45deg)
	}
	#nav-tgl:checked ~ .close2 {
		pointer-events: auto;
		background: rgba(0,0,0,.3)
	}

	.drawer-title {
		color: #fff;
		font-size: 16px;
		font-weight: bold;
		padding: 24px;
	
	}
	.drawer-title-category {
		color: #fff;
		font-size: 18px;
		font-weight: bold;
		padding: 18px;
		border-bottom:1px solid #fff;
	}
	.drawer-menu {
		z-index: 99999;
		position: fixed;
		overflow-y: scroll;
		font-family: メイリオ, Meiryo, Verdana, "游ゴシック", YuGothic, "Hiragino Kaku Gothic ProN", sans-serif;
		-webkit-overflow-scrolling: touch;
		overflow-scrolling: touch;
		top: 0;
		right: 0;
		width: 290px;
		height: 100%;
		box-sizing: border-box;
		background: #727393;
		transform: translateX(290px);
		transition: transform .6s cubic-bezier(.215, .61, .355, 1);
		-webkit-transform: translateX(290px);
		-webkit-transition: -webkit-transform .6s cubic-bezier(.215, .61, .355, 1)
	}
	.drawer-menu ul li a{
		display: block;
		position: relative;
	
	}

	.drawer-menu .menu-item-has-children > a:after {
		display: block;
		position: absolute;
		top: 50%;
		right: 20px;
		content: "";
		width: 8px;
		height: 8px;
		border-top: 3px solid #fff;
		border-right: 3px solid #fff;
		transform: translateY(-50%) rotate(135deg);
		transition: transform .3s ease;
	}
	.drawer-menu .menu-item-has-children.open > a:after {
		transform: translateY(-50%) rotate(-45deg);
	}
	.drawer-menu-list a {
		display: block;
		color: #fff !important;
		font-size: 16px;
		padding: 12px;
		text-decoration: inherit;

	}

	#nav-tgl:checked~.drawer-menu {
		transform: none;
		-webkit-transform: none
	}
	ul.main-menu li a {
		position: relative;
		display: block;
		color: #fff !important;
		font-size: 18px;
		font-weight: 700;
		text-decoration: none;
		line-height: 18px;
		padding: 15px;
		border-bottom: 1px solid #fff
	}
	ul.sub-menu li a {
		position: relative;
		display: block;
		color: #fff !important;
		font-size: 16px;
		font-weight: 400;
		text-decoration: none;
		line-height: 18px;
		padding: 18px 10px 18px 18px;
		border-bottom: 1px solid #fff
	}
	/*
	ul.sub-menu li a:after {
		display: block;
		position: absolute;
		top: 41%;
		right: 20px;
		content: "";
		width: 6px;
		height: 6px;
		border-top: 3px solid #666;
		border-right: 3px solid #666;
		transform: rotate(45deg);
		-webkit-transform: rotate(45deg)
	}
	*/
}