/*************************************************************
  目次JSで設定されてるスタイル

  ＜詳細＞
  └ 以下classを持ってるページに設定されてる目次が該当と想定
　  └ 対応エリア > サブエリア (.page-area-pref) ※ 固定ページ
　  └ 対応エリア > サブエリア > エリア詳細 (.page-area)
　  └ コラム > 記事 (.dispose)
　  └ コラム > 回収可能な品目 > 品目 (.dispose)
    ※ <main>のクラスで切り分け

*************************************************************/
:root {
	--subFontSizeSP:1.4rem;
	--spIndexTitleFontLineHeight: 2.4rem;
	--pcIndexTitleFontLineHeight: 24px;
	--subFontSizePC:14px;
	--pcTitleFontSize: 24px;
	--pcTitleFontLineHeight: 35px;
	--pcTitlePaddingBlock: 10px;
	--fFamily: NotoSansJP, sans-serif;
}
div.inner > div.tocBlock {
	background: #F7F9FC;
	border-radius: 1.5rem;
	margin: 4rem auto;
	padding: 0 2rem;
}

#tocBlock{
	box-sizing: border-box;
	width: 100%;
	color: #000000;
    padding-block: 2.5rem;
    padding-inline:0;
	font-family: var(--fFamily);
	font-weight: bold;
	counter-reset: h2;
}
#tocBlock:before{
	content:'目次';
	font-size: 2rem;
	font-weight: bold;
	letter-spacing: .08rem;
	color: #0056B5;
	line-height: 2.9rem;
	display: block;
	width: 100%;
	text-align: center;
	border-bottom: 1px dashed #0056B5;
	padding-bottom: 1.3rem;
	margin-bottom: 1.9rem;
}

#tocBlock li{
    margin-top: 0.4rem;
}

#tocBlock li:before{
	transform: initial;
}

#tocBlock li.h2 a:visited,
#tocBlock li.h3 a:visited{
	text-decoration: none;
}
#tocBlock li.h2 a:active,
#tocBlock li.h2 a:hover,
#tocBlock li.h3 a:active,
#tocBlock li.h3 a:hover{
	text-decoration: none;
}

/* h2 */
#tocBlock li.h2{
	padding-left: 2rem;
	line-height: var(--spIndexTitleFontLineHeight);
	font-size: var(--subFontSizeSP);
	letter-spacing: 0.064rem;
	font-weight: bold;
	counter-increment: h2;
  	counter-reset: h3;
}

#tocBlock li.h2:before{
    color: #0056B5;
	font-size: var(--subFontSizeSP);
	line-height: var(--spIndexTitleFontLineHeight);
	letter-spacing: 0.065rem;
    position: absolute;
	content: counter(h2) ". ";
}
/* h3 */
#tocBlock li.h3{
	font-size: var(--subFontSizeSP);
	line-height: var(--spIndexTitleFontLineHeight);
	padding-left: 5.7rem;
	counter-increment: h3;
  	counter-reset: h4;
}
#tocBlock li.h3:before{
    content:  '0' counter(number4);
    color: #0056B5;
    font-size: var(--subFontSizeSP);
	line-height: var(--spIndexTitleFontLineHeight);
	letter-spacing: 0.056rem;
    left: 2.1rem;
	content: counter(h3, decimal-leading-zero) " ";
}

/* h4 */
#tocBlock li.h4{
	font-size: var(--subFontSizeSP);
	line-height: var(--spIndexTitleFontLineHeight);
	padding-left: 9.5rem;
	counter-increment: h4;
}
#tocBlock  li.h4:before{
    color: #0056B5;
	font-size: var(--subFontSizeSP);
	line-height: var(--spIndexTitleFontLineHeight);
	letter-spacing: 0.056rem;
    left: 4.8rem;
	content:counter(h3, decimal-leading-zero)"-" counter(h4) " ";
}

/* h5 */
#tocBlock li.h5{
	font-size: var(--subFontSizeSP);
	line-height: var(--spIndexTitleFontLineHeight);
	padding-left: 9.5rem;
}

#tocBlock li.h5:before{
	content: '└';
    color: #0056B5;
    top: 0.2rem;
    left: 7.5rem;
}

/* 「｜」 の調整*/
#tocBlock li.h3::after,
#tocBlock li.h4::after{
	content: "";
	display: inline-block;
	background-color: #0056B5;
	position: absolute;
	width: 1px;
	height: 1.5rem;
    top: 0.4rem;
    left: 4.8rem;
}
#tocBlock li.h4::after{
	content: "";
	display: inline-block;
	background-color: #0056B5;
	position: absolute;
	width: 1px;
	height: 1.5rem;
    top: 0.4rem;
    left: 8.9rem;
}

@media screen and (min-width: 769px){
	div.inner > div.tocBlock {
		background: #F7F9FC;
		border-radius: 20px;
		margin: 60px auto;
		width: 600px;
		padding: 0 50px;
	}
	#tocBlock{
	    max-width: 100%;
		padding-block: 30px;
	}
	#tocBlock li{
		margin-top: 4px;
	}
	#tocBlock:before{
		font-size: 17px;
		letter-spacing: 0.68px;
		padding-bottom: 5px;
		margin-bottom: 23px;
	}

	.tocBlock ul#tocBlock li.h3:before,
	.tocBlock ul#tocBlock li.h4:before,
	.tocBlock ul#tocBlock li.h5:before{
		font-size: var(--subFontSizePC);
		letter-spacing: .56px;
	}

	#tocBlock li.h2{
		font-size: var(--subFontSizePC);
		line-height: var(--pcIndexTitleFontLineHeight);
		font-weight: bold;
		letter-spacing: 0.56px;
		padding-left: 20px;
	}
	#tocBlock li.h2:first-child {
		margin-top: 25px;
	}
	.tocBlock ul#tocBlock li.h2:before {
		font-size: var(--subFontSizePC);
		line-height: var(--pcIndexTitleFontLineHeight);
		font-weight: bold;
		letter-spacing: .64px;
		top: 0;
	}
	/* h3 */
	#tocBlock li.h3 {
		font-size: var(--subFontSizePC);
		line-height: var(--pcIndexTitleFontLineHeight);
		padding-left: 58px;
	}
	.tocBlock ul#tocBlock li.h3:before {
		top: 0;
		left: 21px;
		line-height: var(--pcIndexTitleFontLineHeight);
	}
	.tocBlock ul#tocBlock li.h3::after {
		height: 15px;
        top: 5px;
        left: 49px;
	}
	/* h4 */
	#tocBlock li.h4{
		font-size: var(--subFontSizePC);
		line-height: var(--pcIndexTitleFontLineHeight);
		padding-left: 97px;
	}
	#tocBlock li.h4:before{
		top: 0;
        left: 46px;
		line-height: var(--pcIndexTitleFontLineHeight);
	}
	#tocBlock li.h4::after {
		top: 5.6px;
        left: 89px;
		height: 15px;
	}
	/* h5 */
	#tocBlock li.h5{
		font-size: var(--subFontSizePC);
		padding-left: 97px;
		line-height: var(--pcIndexTitleFontLineHeight);
	}
	.tocBlock ul#tocBlock li.h5:before{
		left: 70px;
		line-height: var(--pcIndexTitleFontLineHeight);
	}


	.inner > h2.wp-block-heading,
	.inner > h3.wp-block-heading,
	.inner > h4.wp-block-heading,
	.inner > h5.wp-block-heading{
	    pointer-events: none;
		display: flex;
        align-items: center;
		font-size: var(--pcTitleFontSize) ;
		line-height: var(--pcTitleFontLineHeight) ;
		padding-block: var(--pcTitlePaddingBlock);
		min-height: 55px;
	}
	.inner h5::after {
		width: 50px;
	}

}