【トール】目次のデザインを変える

/*ここから目次*/
.content .outline a {
	font-size: 16px;/*文字サイズ*/
	font-weight:bold;/*文字太さ*/
}

/*リンク文字にホバーで文字色変更*/
.content .outline a:hover {
	color:#58a9ef;/*文字色*/
}

.content .outline {
	background: #ebf6f7;/*背景色の一部①*/
	border: solid 2px #58a9ef;/*枠線*/
	border-top: solid 10px #58a9ef;/*上の枠線*/
	font-size:18px; /*タイトル文字サイズ*/
	text-align:center; /*タイトルの中央寄せ*/
	width:100%; /*お好きな幅で*/
}

/*幅をせばめた目次自体を中央寄せしたいときは上のコードにこれも追加
width:80%; お好きな幅で
margin: 20px auto 0; 上の余白指定、真ん中寄せ
display:block; ブロック要素
*/

/*全ての目次の番号について*/
.content .outline__number {
 background:#58a9ef; /*番号の背景色*/
 border-radius:50%; /*番号の丸み*/
 border:solid 2px #fff;/*番号の枠の色*/
 color: white;/*数字の色*/
 font-weight:bold;/*数字の太さ*/
 line-height:25px;/*番号の丸の高さ*/
 margin-right:6px; /*番号から文字までの余白*/
 padding: 0;/*番号の丸の内側の余白*/
 text-align:center; /*数字の中央寄せ*/ 
 width: 30px;/*番号の丸の幅*/
}

/*h3以下の階層の番号について*/
.content ul ul .outline__number {
	background:#fff; /*番号の背景色*/
	border-radius:50%; /*番号の丸み*/
	border:solid 2px #58a9ef;/*番号の枠の色*/
	color: #58a9ef;/*数字の色*/
	width: 35px;/*番号の丸の幅*/
}

/*h3以下の階層の左余白*/
	.content .outline ul li ul li {
	margin-left: 28px;
}

/*h4以下の階層の番号もリンクも非表示*/
.content ul ul ul {
	display: none;
}

/*目次のタイトル部分*/
.content .outline__switch::before{
border-radius:0px; /*枠の丸み*/
color:#7c4006; /*閉じる文字色*/
border:none; /*いったん、枠を消す*/
border-bottom:solid #f9989f 2px;/*下の枠だけ表示*/
font-size:18px; /*文字サイズ*/
content: "ひらく"; /*クリックした後の文字*/
}

/*目次のタイトルと内容*/
.content .outline__switch + .outline__list{
	background:#ebf6f7;/*背景色の一部②*/
	text-align:left;
}

/*モバイルで目次内容の左余白をせばめる*/
@media only screen and (max-width: 768px){ 
	.outline__link {margin-left:-5px;
	}
}

/*全ての番号を非表示*/
.content ul .outline__number {
	display: none;
}

/*h3以下の階層の番号だけ非表示*/
.content ul ul .outline__number {
	display: none;
}

/*h4以下の階層の番号非表示*/
.content ul ul ul .outline__number {
	display: none;
}