@charset "utf-8";

/*============

aside_nav.css

=============*/

/*-------------

aside-navigation

--------------*/

.bottom-nav {
	z-index: 60;
	position: absolute;
	top: 0;
	width: 100%;
	max-width: 40rem;
	left: -40rem;
	transition: 0.3s;
	padding-bottom: 4rem;
	padding-top: 4rem;
}

.bottom-nav.open {
	left: 0;
}

.bottom-nav::before {
	content: "";
	position: fixed;
	top: 0;
	bottom: 0;
	left: -40rem;
	margin: auto;
	width: 40rem;
	height: 100%;
	transition: all 0.3s;
	background-color: #222;
}

.bottom-nav.open::before {
	left: 0;
}

.bottom-nav-list__first-level {
	padding-left: 2rem;
}

.bottom-nav-list__second-level {
	padding-left: 2rem;
}

.bottom-nav-list__third-level {
	padding-left: 2rem;
}


.bottom-nav-list__fourth-level {
	padding-left: 2rem;
}

.bottom-nav__inner {
	height: 100vh;
	overflow-y: scroll; /*ナビの数が増えた場合縦スクロールする*/
	-ms-overflow-style: none; /* スクロール非表示 IE, Edge 対応 */
	scrollbar-width: none; /* スクロール非表示 Firefox 対応 */
}

.bottom-nav__inner::-webkit-scrollbar {
	display:none; /* スクロール非表示 Chrome, Safari 対応 */
}

.bottom-nav-openbtn {
	position: absolute;
	top: 6rem;
	left: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 4rem;
	height: 10rem;
	background-color: #222;
	border-radius: 0 1rem 1rem 0;
	box-shadow: -0.4rem 0.2rem 0.8rem rgba(0, 0, 0, 0.4);
	z-index: 60;
	transition: all 0.3s;
}

.bottom-nav-openbtn.open {
	left: 40rem;
	transition: all 0.3s;
}

.bottom-nav-openbtn:after {
	content: "";
	width: 1.4rem;
	height: 1.4rem;
	transform: rotate(45deg);
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
	transition: 0.3s;
	margin: 0 8px 0 0;
}

.bottom-nav-openbtn.open:after {
	transform: rotate(-135deg);
	margin: 0 0 0 8px;
}

/*-------------

bottom-nav-list

--------------*/

.bottom-nav-list li {
	font-size: max(1.8rem, 16px);
	line-height: 1.6;
	color: #fff;
}

.bottom-nav-list li a {
	position: relative;
	padding: 1.4rem 1.4rem 1.4rem 2.8rem;
	display: block;
}

.bottom-nav-list li a:before {
	content: "";
	position: absolute;
	width: 2.0rem;
	height: 0.4rem;
	top: 2.6rem;
	left: 0;
	display: inline-block;
	background-color: #fcc;
}

.bottom-nav-list li a:hover {
	background-color: #000;
	text-decoration: underline;
	text-underline-offset: 0.2rem;
}

.bottom-nav-list li a:hover:before {
	background-color: #e60012;
}

/*============

media queries

=============*/

/*-------------

タブレット・スマホ

--------------*/

@media (max-width: 959px) {

}

/*-------------

スマホ

--------------*/

@media (max-width: 519px) {

}