@charset "UTF-8";
:root {
	/**
	 * アンカーリンクのためのヘッダー高さ変数
	 */

	/** height var*/
	--height-header: 10svh;
	--height-header-plus-breadcrumb: 12svh;
	scroll-padding-top: var(--height-header);
	scroll-behavior: smooth;

	/** radius var*/
	--radius-basic: 1rem;
}

article {
	width: 100%;
	max-width: 100vw;
}

/**
* MEMO: section
* - width を 100% にしておき、max-width で最大幅を指定することで、
* 	画面幅が狭い場合に自動的に縮むようにする。
*/
section {
	padding: 1rem;
	width: 100%;
	max-width: 100vw;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
}

.top-layout {
	width: 100%;
	max-width: 100vw;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
}

.basic-layout {
	width: 100%;
	max-width: 100vw;
	margin-top: var(--height-header);
	padding: 1rem;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
}

.note-layout {
	margin-top: var(--height-header-plus-breadcrumb);
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: auto auto auto 1fr auto;
	grid-template-areas:
		'header'
		'main'
		'aside'
		'breadcrumb'
		'footer';
}

.note-layout__headding-three {
	margin: 1rem 0.5rem 0.5rem 1rem;
	padding: 0.5rem;
	border-radius: 0.5rem;
	text-align: left;
}

.basic-layout__header {
	border-radius: var(--radius-basic);
}

.note-layout__header {
	grid-area: header;
	border-radius: var(--radius-basic);
	justify-content: flex-start;
}

.note-layout__section {
	background-color: transparent;
	align-items: flex-start;
}

main {
	grid-area: main;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	position: relative;
	z-index: 1;
}

/**
 * TODO: layoutごとにmainのスタイルを分ける
 * .basic-layout__main {
 * }
 */

.note-layout__main {
	grid-area: main;
	border-top: 1px solid lightgray;
	border-bottom: 1px solid lightgray;
	background-color: white;
}

aside {
	grid-area: aside;
	padding: 0 1rem;
	width: 100%;
	box-sizing: border-box;
	background-color: var(--color-bg-aside);
}

.note-layout__footer {
	grid-area: footer;
}

.sidebar__ol {
	display: flex;
	flex-direction: column;
}

pre {
	padding-left: 1rem;
	color: white;
	background-color: black;
	font-family: Consolas, sans-serif;
	border-radius: 0.5rem;
	max-width: 100%;
	overflow-x: auto;
	box-sizing: border-box;
}

/** PC Edition */
@media screen and (min-width: 1280px) {
	:root {
		/** height var*/
		--height-header: 15svh;
		--height-header-plus-breadcrumb: 15svh;
	}

	.basic-layout {
		max-width: 80vw;
	}

	.note-layout {
		grid-template-columns: 250px 1fr;
		grid-template-rows: auto auto 1fr auto;
		grid-template-areas:
			'header header'
			'breadcrumb breadcrumb'
			'aside   main'
			'footer  footer';
		align-self: flex-start;
	}

	aside {
		border-top: 1px solid lightgray;
		border-right: 1px solid lightgray;
		border-bottom: 1px solid lightgray;
	}
	.toc-accordion {
		display: block;
	}
	.toc-accordion summary {
		pointer-events: none;
		list-style: none;
		cursor: default;
	}

	section {
		max-width: 90vw;
	}
}