@layer region {

	/*  コンテンツ見出し  */

	.title_heading {
		border-block-end-style: solid;
		border-block-end-width: 3px;
		border-block-end-color: #017a6a;
		padding-block: 1rem;
		padding-inline: 1rem;
		font-size: 1.375rem;
		font-weight: bold;
		text-align: start;
		background-color: #dcf4f1;
		color: #017a6a;
		text-shadow: 1px 1px 0 rgba(255, 255, 255, 1);
		box-shadow: 0 5px 4px -4px rgba(0, 0, 0, 0.3) inset;
	}

	/* 事例集インデックス */
	.example_index_main {
		margin-block: 1rem;
		margin-inline: 1rem;
	}
	@media (width < 768px) {
		.example_index_side_menu {
			display: none;
		}
	}
	@media (width >= 768px) {
		.example_index_main {
			display: grid;
			grid-template-columns: 3fr 1fr;
			column-gap: 1rem;
		}
	}
	/* サイドのメニュー */
	.example_index_side_menu {
		margin-block: 0;
		padding-block-start: 0;
		padding-block-end: 0;
		padding-inline-start: 40px;
		padding-inline-end: 0;
		list-style-type: none;

		> li {
			position: relative;
			margin-block-start: 1.25rem;
			padding-inline-start: 1.25rem;
		}
		> li::before {
			content: "";
			display: block;
			position: absolute;
			bottom: 0px;
			left: 0px;
			block-size: 0;
			inline-size: 87.5%;
			border-block-end-style: dashed;
			border-block-end-width: 1px;
			border-block-end-color: #aaaaaa;
		}
		> li::after {
			content: "";
			display: block;
			position: absolute;
			top: 0.5em;
			left: 0;
			width: 6px;
			height: 6px;
			border-right: 1px solid #666;
			border-bottom: 1px solid #666;
			transform: rotate(-45deg);
		}
		& :any-link {
			color: #666;
		}
		& :any-link:hover {
			color: #017a6a;
			text-decoration: none;
		}

		& :any-link.on {
			color: #017a6a;
		}

		/* サブメニュー */
		.sub_menu {
			padding-inline-start: 2rem;
			list-style-type: none;

			> li {
				margin-block-start: 1.25rem;
				margin-inline-start: 0;
				padding: 0;
				border-bottom: 1px dashed #aaa;
				text-indent: -2rem;
			}
			> li::before {
				content: "─";
				box-sizing: content-box;
				padding: 0 0.5rem;
				display: inline;
				position: static;
				border: none;
			}
			> li::after {
				display: none;
			}

			& label {
				display: inline;
			}
			& :is(label:hover, label:focus) {
				text-decoration: underline;
			}
		}
	}
}