@charset "UTF-8";
/* CSS Document */


/******************************************************

PC設定 1024px以上の場合に適用 

*******************************************************/

.drawerNav__btnArea {
	position: fixed;
	right: 0;
	top: 0;
	background: #35A7C9;
	width: 50px;
	height: 50px;
	z-index: 9300;
	display: block;
	}

.drawerNav__btnArea:hover {
	cursor: pointer;
	}

.drawerNav__btnIcon {
	width: 16px;
	height: 1px;
	background-color: #FFF;
	position: relative;
	display: block;
	top: 25px;
	left: 16px;
	}

.drawerNav__btnIcon::before {
	content: '';
	width: 16px;
	height: 1px;
	background: #FFF;
	display: block;
	position: absolute;
	top: 6px;
	transition: .2s;
	-webkit-transition: .2s;
	}

.drawerNav__btnIcon::after {
	content: '';
	width: 16px;
	height: 1px;
	background: #FFF;
	display: block;
	position: absolute;
	top: -6px;
	transition: .2s;
	-webkit-transition: .2s;
	}
	
.openBtn .drawerNav__btnIcon::after {
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
	top: 0; 
	}

.openBtn .drawerNav__btnIcon::before {
	-webkit-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg);
	top: 0; 
	}

.openBtn .drawerNav__btnIcon {
	background-color: transparent;
	}

.drawerNav .open {
	display: block;
	}

.drawerNav__content {
	display: none;
	width: 40%;
	height: auto;
	background: #35A7C9;
	position: fixed;
	top: 50px;
	right: 0;
	overflow-y: scroll;
	z-index: 1000;
	}

.drawerNav__item {
	border-bottom: 1px solid #FFF;
	width: 100%;
	height: 60px;
	}

.drawerNav__link {
	display: block;
	width: 100%;
	height: 60px;
	padding-left: 30px;
	line-height: 60px;
	font-size: 16px;
	color: #FFF;
	font-weight: bold;
	}




/******************************************************

〜1023pxの場合に適用 

*******************************************************/

@media screen and (max-width: 1023px){
	
.drawerNav__content {
	width: 100%;
	}
	
	
	
}