/* 「もくじ」ボタンと「閉じる」ボタンの入れ替え */
#close-ha-toc-btn{
	position:fixed;
	left:-120%;
	transition-property: left;
	transition-duration: 0.6s;
	transition-delay: 0s;
	transition-timing-function: linear;
}

#close-ha-toc-btn.ha-toc-view{
	position: fixed;
	bottom: 0;
	left: 12%;
	transition-property: left;
	transition-duration: 0.6s;
	transition-delay: 0s;
	transition-timing-function: linear;
	border: none;
	padding: 4px;
	background: #301408;
	color: #fff;
	z-index:999;
}

#open-ha-toc-btn {
	position: fixed;
	bottom: 20px;
	left:calc( (100vw - var(--wp--style--global--wide-size)) / 2 - 4rem);
	transition-property: left;
	transition-duration: 0.6s;
	transition-delay: 0s;
	transition-timing-function: linear;
	background: #fff;
	padding: 4px 8px;
	color: #301408;
}


#open-ha-toc-btn.ha-toc-view{
	position:fixed;
	left:-120%;
	transition-property: left;
	transition-duration: 0.6s;
	transition-delay: 0s;
	transition-timing-function: linear;
}

/* サイト全体の移動 */
/* フルHD以上では移動させない */
@media screen and (max-width:1919px){
	body{
		margin-left:0;
		transition-property: margin-left;
		transition-duration: 0.6s;
		transition-delay: 0s;
		transition-timing-function: linear;
	}

	body.ha-toc-view{
		margin-left:12%;
		transition-property: margin-left;
		transition-duration: 0.6s;
		transition-delay: 0s;
		transition-timing-function: linear;
	}
}

button#close-ha-toc-btn {
	max-width: 100px;
}

#ha-toc{
	position:fixed;
	left:-120%;
	transition-property: left;
	transition-duration: 0.6s;
	transition-delay: 0s;
	transition-timing-function: linear;
}

#ha-toc.ha-toc-view{
	top: 0px;
	left: 0px;
	height: 100%;
	position: fixed;
	background: #301408;
	box-shadow: inset -5px 0 5px 0px #000;
	width: 12%;
	padding-top: 20px;
	color: #fff;
	overflow:auto;
	transition-property: left;
	transition-duration: 0.6s;
	transition-delay: 0s;
	transition-timing-function: linear;
}

#ha-toc ul{
	margin-top:20px;
	padding: 0;
	list-style: none;
}

body.admin-bar #ha-toc ul{
	margin-top:52px;
}

#ha-toc li{
	padding: 5px 10px;
}

#ha-toc a{
	color: #fff;
	text-decoration: none;
	display: block;
}

#ha-toc .toc-h2{
	padding-left: 4px;
	font-size:0.9rem;
}

#ha-toc .toc-h3{
	padding-left: 12px;
	font-size:0.8rem;
}

#ha-toc .toc-h4{
	padding-left: 20px;
	font-size:0.7rem;
}

#ha-toc .toc-active{
	background: #336699;
	box-shadow: inset -5px 0px 10px -5px #000;
}


@media screen and (min-width:1920px){
	#close-ha-toc-btn.ha-toc-view,
	#ha-toc.ha-toc-view{
		width:14%;
	}

	#close-ha-toc-btn.ha-toc-view{
		left:14%;
	}
}

@media screen and (max-width:1279px){
	#ha-toc{
		display: none;
	}

	body{
		margin-left:0;
		}

	#close-ha-toc-btn,
	#open-ha-toc-btn{
		display:none;
	}
}




/***** スクロールバーの色 *****/
/*
#toc-slide::-webkit-scrollbar {
    width: auto;
}
 
#toc-slide::-webkit-scrollbar-track {
    background-color: #b0dcef;
}
 
#toc-slide::-webkit-scrollbar-thumb {
    box-shadow: inset 0 0 8px #0693e3;
}
*/