/*************************************************************
  該当ページのデフォルトの見出しスタイル


  ＜詳細＞
  └ ここで言うデフォルトとは<h0 cls="> が付いてる見出し
	  └ 例外 )
	  	対応エリア > サブエリアにある目次上部の「inner-single-ttl」の箇所

  └ ここで言う該当ページは以下に記載してるページを想定
	　└ 対応エリア > サブエリア  (.page-area-pref.page-area) ※ 固定ページ
	　└ 対応エリア > サブエリア > エリア詳細 (.page-area)
	　└ コラム > 記事 (.dispose)
	　└ コラム > 回収可能な品目 > 品目 (.dispose)
	  ※ <main>のクラスで切り分け

*************************************************************/

/* :rootのCSS変数の宣言 */
:root {
	--accentColor: #182987;
	--spTitleFontSize: 2.0rem;
	--spTitleFontWeight: bold;
	--spTitleFontLineHeight: 2.6rem;
	--spTitlePaddingInline: 2rem;
	--spTitlePaddingBlock: 1.5rem;
	--spMarginBlock: 4rem 0;
	--spHeadingWidthSpace: 100%;
	--pcHeadingWidthSpace: 100%;
	--pcMarginBlock: 40px 0;
}


/*
  └ 対応エリア > サブエリア > エリア詳細 (.page-area)
  └ コラム > 記事 (.dispose)
  └ コラム > 回収可能な品目 > 品目 (.dispose)
*******************************************************************************/
.page-area .content .inner>h2,
.page-area .content .inner>h3,
.page-area .content .inner>h4,
.page-area .content .inner>h5 {
	margin-inline: 0;
	margin-block: var(--spMarginBlock);
}


.dispose .content .inner>h2,
.dispose .content .inner>h3,
.dispose .content .inner>h4,
.dispose .content .inner>h5 {
	margin: var(--spMarginBlock);
}


/* h2 */
.page-area .content .inner>h2.inner-single-ttl,
.page-area .content .inner>h2,
.dispose .content .inner>h2 {
	font-size: var(--spTitleFontSize) ;
	font-weight: var(--spTitleFontWeight) ;
	line-height: var(--spTitleFontLineHeight) ;
	padding-inline: var(--spTitlePaddingInline) ;
	padding-block: var(--spTitlePaddingBlock) ;
	margin: 0 0 3rem;
	background-color: var(--accentColor) ;
	color: #FFFFFF;
	border-radius: .7rem;
	min-height: 5.9rem;
	width: var(--spHeadingWidthSpace);
	position: relative;
	text-align: left;
}


/* h3 */
.page-area .content .inner>h3,
.dispose .content .inner>h3 {
	font-size: var(--spTitleFontSize) ;
	font-weight: var(--spTitleFontWeight) ;
	line-height: var(--spTitleFontLineHeight) ;
	padding-inline: var(--spTitlePaddingInline) ;
	padding-block: var(--spTitlePaddingBlock) ;
	margin: 0 0 3rem;
	color: var(--accentColor);
	background: #EAEDFF ;
	border-radius: .8rem;
	min-height: 5.9rem;
	overflow: hidden;
	width: var(--spHeadingWidthSpace);
	position: relative;
	border: none ;
	display: flex;
	align-items: center;
}

.page-area .content .inner>h3::before,
.dispose .content .inner>h3::before {
	content: "";
	display: block;
	width: .8rem;
	height: 100%;
	background-color: var(--accentColor);
	position: absolute;
	left: 0;
	top: 0;
}

/* h4 */
.page-area .content .inner>h4,
.dispose .content .inner>h4 {
	font-size: var(--spTitleFontSize) ;
	font-weight: var(--spTitleFontWeight) ;
	line-height: var(--spTitleFontLineHeight) ;
	padding-inline: var(--spTitlePaddingInline) ;
	padding-block: var(--spTitlePaddingBlock) ;
	margin: 0 0 3rem;
	color: #000000;
	min-height: 5.8rem;
	width: var(--spHeadingWidthSpace);
	position: relative;
	display: flex;
	align-items: center;
	border-left: none ;
}

.page-area .content .inner>h4::before,
.page-area .content .inner>h4::after,
.dispose .content .inner>h4::before,
.dispose .content .inner>h4::after {
	content: "";
	display: block;
	width: .6rem;
	height: 50%;
	position: absolute;
	left: 0;
	top: 0;
}

.page-area .content .inner>h4::before,
.dispose .content .inner>h4::before {
	background-color: #A0CBFC;
}

.page-area .content .inner>h4::after,
.dispose .content .inner>h4::after {
	background-color: var(--accentColor);
	margin-top: auto;
	bottom: 0;
}

/* h5 */
.page-area .content .inner>h5,
.dispose .content .inner>h5 {
	background: transparent;
	font-size: var(--spTitleFontSize) ;
	font-weight: var(--spTitleFontWeight) ;
	line-height: var(--spTitleFontLineHeight) ;
	padding-inline: var(--spTitlePaddingInline) ;
	padding-block: var(--spTitlePaddingBlock) ;
	margin: 0 0 3rem;
	color: #000000;
	min-height: 5.9rem;
	overflow: hidden;
	width: var(--spHeadingWidthSpace);
	position: relative;
	display: flex;
	align-items: center;
}

.page-area .content .inner>h5::before,
.page-area .content .inner>h5::after,
.dispose .content .inner>h5::before,
.dispose .content .inner>h5::after {
	content: "";
	display: block;
	height: 0.2rem;
	position: absolute;
	left: 0;
	bottom: 0;
}

.page-area .content .inner>h5::before,
.dispose .content .inner>h5::before {
	width: 100%;
	background-color: #A0CBFC;
}

.page-area .content .inner>h5::after,
.dispose .content .inner>h5::after {
	width: 4rem;
	border-radius: 2px;
	background-color: var(--accentColor);
}

/* 調整 */
/* h2 + h3 */
.page-area .content .inner>h2+h3,
.page-area .content .inner>h3+h4,
.page-area .content .inner>h4+h5,
.dispose .content .inner>h2+h3,
.dispose .content .inner>h3+h4,
.dispose .content .inner>h4+h5
{
	margin-top: 4.5rem;
}

.page-area .content .inner>p+h2,
.page-area .content .inner>p+h3,
.page-area .content .inner>p+h4,
.page-area .content .inner>p+h5,
.dispose .content .inner>p+h2,
.dispose .content .inner>p+h3,
.dispose .content .inner>p+h4,
.dispose .content .inner>p+h5 {
	margin-top: 3rem;
}

/* PC - スタイル *******************************************/
@media screen and (min-width: 769px) {

	/* 共通 */
	.page-area .content .inner>h2.inner-single-ttl,
	.page-area .content .inner>h2,
	.page-area .content .inner>h3,
	.page-area .content .inner>h4,
	.page-area .content .inner>h5,
	.dispose .content .inner>h2,
	.dispose .content .inner>h3,
	.dispose .content .inner>h4,
	.dispose .content .inner>h5 {
		padding: 10px 20px ;
		font-size: 24px ;
		line-height: 35px ;
		max-width: 960px;
		width: 100%;
		margin-inline: 0;
		margin: 0 0 30px;
		min-height: 55px;
	}

	/* h2 */
	.page-area .content .inner>h2,
	.dispose .content .inner>h2 {
		border-radius: 7px;
	}

	/* h3 */
	.page-area .content .inner>h3,
	.dispose .content .inner>h3 {
		border-radius: 8px;
	}

	.page-area .content .inner>h3::before,
	.dispose .content .inner>h3::before {
		width: 8px;
	}

	/* h4 */
	.page-area .content .inner>h4,
	.dispose .content .inner>h4 {
		border-radius: 8px;
	}

	.page-area .content .inner>h4::before,
	.page-area .content .inner>h4::after,
	.dispose .content .inner>h4::before,
	.dispose .content .inner>h4::after {
		width: 6px;
	}
}