.wrapper {
	display: flex;
	align-items: stretch;
	perspective: 1500px;
	position: fixed;
	right: 0;
	top: 0;
	z-index: 500;
}

/* サイドバー全体の設定(非表示時) */
#sidebar {
	width: 400px;
	height:100vh;
	background: #000000;
	color: #fff;
	opacity: 1;
	margin-left: -250px;
	transform: rotateY(100deg); /* Rotate sidebar vertically by 100 degrees. */
	transition: all 0.4s cubic-bezier(0.945, 0.020, 0.270, 0.665);
	transform-origin: center right; /* Set the transformed position of sidebar to center left side. */
	z-index:200;
}

/* サイドバー表示時 */
#sidebar.active {
	margin-left: 0;
	transform: rotateY(0deg); /* Rotate sidebar vertically by 100 degrees. */
	overflow: hidden scroll;
	-ms-overflow-style: none;  /* IE and Edge */
	scrollbar-width: none;  /* Firefox */
	z-index:200;
}
#sidebar.active::-webkit-scrollbar {
	display: none;	/* Chrome and Safari*/
}

/* メニュー内容の位置決め */
#sidebar ul {
	margin-top: 80px; /* ハンバーガーメニューボタンの高さ分 */
}

/* a タグの文字が青くならないように */
#sidebar a, #sidebar a:hover {
	color: #FFFFFF;
	text-decoration: none;
}

/* 矢印(→)アイコン */
#sidebar .arrow, #sidebar .arrow:before, #sidebar .arrow:after {
	text-align: left;
	content: '';
	/*絶対配置で下線の位置を決める*/
	position: absolute;
	background: linear-gradient(90deg, rgba(193,192,192,1) 20%, rgba(134,134,133,1) 50%, rgba(193,192,192,1) 75%,rgba(134,134,133,1) 100%);
	/*アニメーションの指定*/
	transition: all .3s;
}
#sidebar .arrow:before {
	position: absolute;
	top: -10px;
	left:350px;
	/*下線の形状*/
	width: 33px;
	height: 2px;
}
#sidebar .arrow:after {
	position: absolute;
	top: -15px;
	left:371px;
	/*矢印の形状*/
	width: 15px;
	height: 2px;
	transform: rotate(43deg);
}
#sidebar .arrow_se, #sidebar .arrow_se:before, #sidebar .arrow_se:after {
	text-align: left;
	content: '';
	/*絶対配置で下線の位置を決める*/
	position: absolute;
	background: linear-gradient(90deg, rgba(193,192,192,1) 20%, rgba(134,134,133,1) 50%, rgba(193,192,192,1) 75%,rgba(134,134,133,1) 100%);
	/*アニメーションの指定*/
	transition: all .3s;
}
#sidebar .arrow_se:before {
	top: 12px;
	left:300px;
	/*下線の形状*/
	width: 33px;
	height: 2px;
}
#sidebar .arrow_se:after {
	top: 7px;
	left:321px;
	/*矢印の形状*/
	width: 15px;
	height: 2px;
	transform: rotate(43deg);
}

/* ＋アイコン */
#sidebar .cross, #sidebar .cross:before, #sidebar .cross:after {
	content: '';
	/*絶対配置で位置を決める*/
	position: absolute;
	background: linear-gradient(90deg, rgba(193,192,192,1) 20%, rgba(134,134,133,1) 50%, rgba(193,192,192,1) 75%,rgba(134,134,133,1) 100%);
	/*アニメーションの指定*/
	transition: all .3s;
}
#sidebar .cross:before {
	top: -10px;
	left: 351px;
	/*横線の形状*/
	width: 33px;
	height: 2px;
}
#sidebar .cross:after {
	top: -10px;
	left: 353px;
	/*縦線の形状*/
	width: 33px;
	height: 2px;
	transform: rotate(90deg);
}

/* 親メニュー展開時の ^ アイコン */
#sidebar .expand:hover {
	background: revert;
	opacity: revert;
}
#sidebar .expand .cross:before {
	width: 20px;
	transform: rotate(135deg);
}
#sidebar .expand .cross:after {
	/*top:-15px;*/
	left: 364px;
	width: 20px;
	transform: rotate(45deg);
}

/* 各項目の中身設定 */
#sidebar li {
	margin: 0;
	padding: 25px 0 22px 0;
}
/* 各項目hover時に反転 */
#sidebar li:hover {
	background-color: rgba(134,134,134,0.4);
	cursor: pointer;
}

/* 各項目下のアンダーライン */
#sidebar li::before {
	content: '';
	/*background: linear-gradient(to right, #1D630D, #6E6D5B, #000000);*/
	width: 100%;
	height: 2px;
	position: absolute;
	left: 0;
	margin-top: 42px;
}
/* サブメニューはアンダーラインなし */
#sidebar li ul li::before {
	background: none;
}
/* サブメニューの最終行だけアンダーラインあり */
#sidebar li ul li:last-child::before {
	/*background: linear-gradient(to right, #1D630D, #6E6D5B, #000000);*/
}

@media (max-width: 768px) {
	#sidebar {
		max-width: 100vw;
	}
	#sidebar .cross:before {
		left: 309px;
	}
	#sidebar .cross:after {
		left: 311px;
	}
	#sidebar .expand .cross:after {
		left: 322px;
	}
}