#PageHeader{
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	box-shadow: 0 1px 3px 0 rgba(0,0,0,0.1);

	h1{
		font-size: var(--font-l);
		font-family: serif;
		padding: 0 2.0rem;
	}
}

#PageBody{
	padding: 0rem 2.0rem 2.0rem;

	/* -----------------------
		base element
	-------------------------- */

	embed{
		margin: 0.5rem 0;
	}
	h2{
		font-size: var(--font-ml);
		font-family: serif;
	}
	h3{
		font-size: var(--font-m);
	}
	ol, ul{
		padding: 0 1.0rem 0;
	}
	time{
		display: block;
		text-align: right;
	}
	table{
		border: solid 1px #999;
		th{
			padding: 0.1rem 0.5rem;
			border-width: 0 1px 3px 0px;
			border-style: double dotted;
			border-color: #999;
		}
		td{
			padding: 0.1rem 0.5rem;
			border-width: 0 1px 1px 0;
			border-style: dotted;
			border-color: #999;
		}
		th:last-of-type{
			border-right-width: 0;
		}
		td:last-of-type{
			border-right-width: 0;
		}
		tbody tr:last-of-type td{
			border-bottom-width: 0;
		}
	}

	blockquote{
		background-color: #f0f4f9;
		border-radius: 1.0rem;
		padding: 0.3rem 1.0rem;
	}

	dt{
		font-weight: bold;
	}
	dd{
		padding: 0 0 0 1.0rem;
	}

	/* -----------------------
		article info
	-------------------------- */
	.info{
		text-align: right;

		display: grid;
		grid-template-columns: 1fr auto;
		column-gap: 1.0rem;
		align-items: center;

		ul.tags{
			font-size: var(--font-xs);
			font-weight: bold;

			display: flex;
			flex-wrap: wrap;
			justify-content: flex-end;
			padding: 0;

			list-style-type: none;

			li{
				white-space: nowrap;
				background-color: rgba(0,0,0,0.1);
				border-radius: 0.2rem;
				padding: 0.3rem 0.4rem;
				margin-left: 0.5rem;
			}
		}
	}

	/* -----------------------
		direct class
	-------------------------- */

	/* width, border */
	.g{ width: 100%; height: auto; max-width: 768px; }
	.h{ width:  50%; height: auto; }
	.t{ width:  33%; height: auto; }
	.border{
		border: solid 1px #999;
		box-shadow: 2px 2px 2px 0 rgba(0,0,0,0.1);
	}

	/* link */
	a.link{
		padding-left: 1.0rem;
		background-image: url(/theme/image/bullet-item.svg);
		background-size: 1.0rem 1.0rem;
		background-repeat: no-repeat;
		background-position: 0rem 0.1rem;
	}

	/* float */
	.right{
		float: right; 
		margin-left: 2.0rem;
	}

	/* color, font weight, display */
	.red { color: red; }
	.blu { color: blue; }
	.grn { color: green; }
	.b   { font-weight: bold; }
	.empty{ display: none; }

	/* -----------------------
		sibling class
	-------------------------- */
	/* text */
	.center + p,
	.center + ul,
	.center + table td{ text-align: center; }

	/* structure 文構造 */
	.structure + ul > li > em{
		font-style: inherit;
		font-size: inherit;
		text-align: center;
		vertical-align: top;
		display: inline-block;
		margin-right: 0.2em;

		&:last-of-type{
			margin-right: 0;
		}

		> em{
			font-size: var(--font-s);
			font-style: inherit;
			display: block;
		}
		> em:first-of-type{
			border-top: dotted 1px #CCC;
		}
		> strong{
			font-style: italic;
		}
	}
	.structure.invisible > em em{
		white-space: nowrap;
		overflow: hidden;
		width: 0;
	}

	/* ol,ul grid layout */
	.fr3 + :has(li) { --fr : 3};
	.fr4 + :has(li) { --fr : 4};
	.fr5 + :has(li) { --fr : 5};

	.grid + :has(li){
		display: grid;
		grid-template-columns: repeat(var(--fr, 2), 1fr);
	}
	.grid.card + :has(li){
		list-style-type: none;
		padding: 0;
		row-gap: 1.0rem;
		column-gap: 1.0rem;
	}
	.vgrid + :has(li){
		display: grid;
		grid-auto-flow: column;
	}

	/* -----------------------
		div class
	-------------------------- */
	div.listedHn{
		counter-reset: cnt;

		h3::before{
			content: counter(cnt)". ";
			counter-increment: cnt;
		}
		h3{
			font-size: var(--font-m);
		}
		p{
			margin-left: 1.0rem;
		}
	}

	/* -----------------------
		foot note
	-------------------------- */
	.footnote{
		hr{
			border: dashed 1px #999;
		}
		ol:before{
			content: "言葉の意味";
			display: inline-block;
			font-weight: bold;
			font-size: var(--font-ms);
		}
		ol{
			font-size: var(--font-ms);
			padding: 0 0 0 1rem;
		}
	}

	/* -----------------------
		vertical margin
	-------------------------- */
	ul.tags{ margin: 0; }
	.info{ margin: 1.0rem 0 0; }

	h2{ margin: 3.0rem 0 1.0rem; }
	h2:first-of-type{ margin: 0 0 1.0rem; }
	p { margin: 1.0rem 0; }
	ul{ margin: 1.5rem 0; }
	ol{ margin: 2.0rem 0; }
	ul ul{ margin: 0.5rem 0; }
	ol ul{ margin: 0.5rem 0; }
	dl{ margin: 1.0rem 0; }
	dd{ margin: 0.3rem; }
	table{ margin: 2.0rem 0; }
	blockquote{ margin: 2.0rem 0; }
	blockquote ol{ margin: 1.0rem 0; }
	blockquote ul{ margin: 1.0rem 0; }

	.margin{ margin: 3.0rem 0; }
	.footnote{ margin: 4.0rem 0 0; }
	.footnote ol{ margin: 1.0rem 0; }
	.footnote ol::before{ margin: 0 0 0.2rem; }
	.footnote ol p{ margin: 0.2rem 0; }
}


/*	Responsive
------------------------------ */
/* pc */
@media screen and (min-width: 769px) and (max-width: 1024px) {
}
/* tablet */
@media screen and (min-width: 481px) and (max-width: 768px) {
}
/* smart phone */
@media screen and (max-width: 480px) {
	#ArticleHeader h1{
		padding: 0 1.0rem;
		font-size: var(--font-m);
	}
	#ArticleBody{
		padding: 0rem 1.0rem 2.0rem;
		.grid + :has(li){
			grid-template-columns: 1fr;
		}
	}
}