@charset "UTF-8";

/* Infomation 
---------------------------------------------------------------------
File Name :  nav.css
Create date :  2018/07/04

// Braek Points
// PC
@media screen and (max-width: 1439px) {
}
@media screen and (max-width: 1199px) {
}
@media screen and (max-width: 979px) {
}
// Tablet
@media screen and (max-width: 767px) {
}
// Phone
@media screen and (max-width: 580px) {
}
---------------------------------------------------------------------
*/


/* --------------------------------
	aside
-------------------------------- */
.asideArea {
	width: 100%;
	position: relative;
}
aside {
	background-color: #fff;
	border-bottom: 1px solid #ccc;
}
article.level2nd aside {
	position: absolute;
	top: -80px;
	width: 100%;
}
aside a,
aside a:link,
aside .clickable {
	display: block;
	color: #000;
	text-decoration: none;
}
aside a.active,
aside a:hover,
aside .clickable.active,
aside .clickable:hover {
	font-weight: bold;
	color: #aa1432;
}
aside .clickable {
	cursor: pointer;
}

aside .nav-sideber {
	display: -ms-flexbox;
	display: flex;
	flex-direction: column;
	background-color: #fff;
	font-size: 13px;
	line-height: 140%;
	overflow-y: auto;
}
aside .nav-sideber .navinner {
	display: -ms-flexbox;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
}
aside .nav-sideber .navinner svg {
	width: 1em;
}
aside .nav-sideber .level2nd .navinner {
	justify-content: space-between;
}
aside .nav-sideber .level3rd .navinner {
	justify-content: flex-start;
}
aside .nav-sideber .level3rd.opened .closed .navinner,
aside .nav-sideber .level3rd.opened .opened .navinner {
	justify-content: flex-start;
}
aside .nav-sideber .level3rd .navinner .navinner {
	justify-content: space-between;
	width: calc(100% - 1.5em);
}

aside .asideHead {
	display: -ms-flexbox;
	display: flex;
	flex-direction: row;
	background-color: #f3f3f3;
	height: 80px;
}
aside .asideHead a {
	align-self: center;
}
@media screen and (max-width: 767px) {
	aside .asideHead {
		height: auto;
		padding: 15px 0;
		border-top: 1px solid #ccc;
	}
}

aside .level1st a,
aside .level1st .clickable {
	font-size: 18px;
	padding-left: 15px;
}
aside .level2nd a,
aside .level2nd .clickable {
	border-top: 1px solid #ccc;
	background-color: #fff;
	font-size: 14px;
	padding: 15px;
}
aside .level3rd,
aside .level3rd.closed {
	display: none;
}
aside .level3rd.opened {
	display: block;
}
aside .level3rd a,
aside .level3rd .clickable {
	border-top: 1px solid #ccc;
	background-color: #f3f3f3;
	font-size: 13px;
	padding: 10px 15px 10px 20px;
}
aside .level4th,
aside .level4th.closed {
	display: none;
}
aside .level4th.opened {
	display: block;
}
aside .level4th a,
aside .level4th .clickable {
	border-top: 1px solid #ccc;
	background-color: #fff;
	font-size: 13px;
	padding: 10px 15px 10px 32px;
}
aside .level5th,
aside .level5th.closed {
	display: none;
}
aside .level5th.opened {
	display: block;
}
aside .level5th a,
aside .level5th .clickable {
	border-top: 1px solid #ccc;
	background-color: #fafafa;
	font-size: 13px;
	padding: 10px 15px 10px 44px;
}

aside .nav-sideber li .nav-sideber-accordion-marker {
	color: #aa1432;
	align-self: center;
	padding-left: 10px;
}
aside .nav-sideber li .nav-sideber-accordion-marker .opened { display: none; }
aside .nav-sideber li .nav-sideber-accordion-marker .closed { display: block; }

@media screen and (max-width: 979px) {
	aside .nav-sideber {
		font-size: 13px;
	}
	aside .level1st a,
	aside .level1st .clickable {
		font-size: 16px;
	}
	aside .level2nd a,
	aside .level2nd .clickable {
		font-size: 12px;
	}
	aside .level3rd {
		display: none;
	}
	aside .level3rd a,
	aside .level3rd .clickable {
		font-size: 11px;
	}
}

@media screen and (max-width: 767px) {
	article.level2nd aside {
		position: relative;
		top: auto;
	}
}