.tree{
	width:300px;
	height:950px;
	background-color:linera-gradient(to bottom,rgb(145,187,73),rgb(56,124,60));

}

/* 第１階層（ルート） */
.tree {
	line-height: 1.8;	/* 各行の幅 */
	padding:0;
	margin-left: 40px;
}

/* 第２階層以降の各階層の位置 */
.tree ul {
	position:relative;
	margin:0;
	margin-left: 0.3em;
	padding:0;
}

/* すべてのフォルダ名・ファイル名の位置 */
.tree li {
	list-style-type:none;
	position: relative;
	padding-left: 3em;
}

/* すべての縦線 */
.tree ul::before {
	content:"";
	position:absolute;
	top:0;
	left:0;
	height:100%;
	border-left: 2px solid #000;
}
	
/* すべての横線 */
.tree ul li::before {
	content:"";
	position: absolute;
	top:0.7em;
	left:0;
	width: 1em;
	border-top: 2px solid #000;
}

/* 各階層liの最初の文字と画像の位置 */
.tree ul li:first-child {
	padding: 0.3em 0 0 3em;
	background-position: 1.4em 0.4em;
}

/* 各階層liの最初の横線の上下位置 */
.tree ul li:first-child::before {
	top: 1em;
}

/* 各階層liの最後の縦線を └ に */
.tree ul li:last-child::before {
	height:100%;
	background-color: rgba(56,124,60,0);
	/*opacity:0;*/
}