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


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

SPの設定 768px以下の場合に適用 

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

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

/* drawerNav */
.drawerNav {
	display: block;
	}

.drawerNav span {
	position: absolute;
	bottom: 5px;
	width: 100%;
	text-align: center;
	font-size: 9px;
	font-weight: bold;
	color: #FFF;
	}

.drawerNav .toggleBtn {
	position: fixed;
	right: 0;
	top: 0;
	background: #5ecbd8;
	width: 60px;
	height: 60px;
	z-index: 9001;
	}

.drawerNav .toggleBtn:hover {
	cursor: pointer;
	}

.toggleBtnIcon {
	width: 28px;
	height: 3px;
	background: #FFF;
	position: relative;
	display: block;
	top: 27px;
	left: 16px;
	}

.toggleBtnIcon::before {
	content: '';
	width: 28px;
	height: 3px;
	background: #FFF;
	display: block;
	position: absolute;
	top: 8px;
	transition: .2s;
	-webkit-transition: .2s;
	}

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

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

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

.drawerNav .open {
	height: 100vh;
	}

.drawerNav .parent {
	position: relative;
	}

.drawerNav .parent .accordionBtn {
	position: absolute;
	top: 0;
	right: 0;
	width: 55px;
	height: 48px;
	}

.drawerNav .parent .accordionBtn:hover {
	cursor: pointer;
	}

.drawerNav .parent .accordionBtnIcon::before {
	content: '';
	background: #FFF;
	width: 17px;
	height: 3px;
	display: block;
	position: absolute;
	top: 21px;
	left: 17px;
	}
	
.drawerNav .parent .accordionBtnIcon::after {
	content: '';
	background: #FFF;
	width: 3px;
	height: 17px;
	display: block;
	position: absolute;
	top: 14px;
	left: 24px;
	}
	
.drawerNav .parent .openAccordionBtn .accordionBtnIcon::after {
	display: none;
	}

.drawerNav .children {
	padding-bottom: 15px;
	display: none;
	}

.drawerNav > ul {
	height: 0;
	width: 100%;
	background: #5ecbd8;
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	padding-top: 60px;
	overflow-y: scroll;
	z-index: 8000;
	transition: .3s;
	-webkit-transition: .3s;
	}

.drawerNav > ul > li {
	border-bottom: 1px solid #7adbe2;
	width: 100%;
	margin: 0 auto;
	}

.drawerNav > ul > li  a {
	padding: 12px 0 12px 5%;
	font-size: 1.8rem;
	font-weight: 500;
	display: block;
	color: #FFF;
	}

.drawerNav > ul > li ul li a {
	padding: 12px 0 12px 3%;
	font-size: 1.8rem;
	font-weight: 500;
	display: block;
	color: #FFF;
	}

.drawerNav > ul > li  a:hover {
	color: #f0efee;
	}

.drawerNav ul li ul {
	width: 96%;
	margin: 0 auto;
	}

.drawerNav ul li ul {
	width: 90%;
	margin: 0 auto;
	}

.drawerNav > ul > li > ul > li {
	background: #7adbe2;
	margin: 0 auto 2px auto;
	}



}