#ArticleWrapper{
	width: 900px;
	margin: 36px auto;

	display: grid;
	grid-template-columns: 628px 1fr;
	column-gap: 18px;
}
#ArticleBody{
	/* base element */
	h1{
		border: solid 1px #BFBFBF;
		margin: 0 0 18px;
	}
	h2{
		font-size: var(--font-m);
		color: #333333;

		margin: 1rem 0 1rem;
		border-width: 0 0 0 9px;
		border-color: #663300;
		border-style: solid;
		border-radius: 6px;
		padding-left: 9px;
	}
	h3{
		font-size: var(--font-s);
		color: #442200;

		margin: 1rem 0 0.5rem;
	}
	p{
		font-size: var(--font-s);
		line-height: 1.4;
		margin: 1rem 0;
	}
	ul{
		font-size: var(--font-s);
		margin: 0;
		padding-left: 1rem;
	}
	li{
		margin: 0.25rem 0;
	}
	ol{
		font-size: var(--font-s);
		margin: 0;
		padding-left: 1rem;
	}
	table{
		width: 100%;
		margin: 1.0rem 0;
		caption{
			font-size: var(--font-ms);
			padding: 0.3rem;
		}
		td,th{
			font-size: var(--font-s);
			border: solid 1px #ccc;
			padding: 0.1rem 0.2rem;
		}
	}

	/* sibling direction
	--------------------------- */
	.flex + ul{
		list-style-type: none;
		display: flex;
		flex-wrap: wrap;
		margin: 0;
		padding: 0;

		li{
			background-image: url(/theme/image/ctr_circle.png);
			background-repeat: no-repeat;
			background-position: 5px center;
			padding-left: 1rem;
			padding-right: 0.5rem;
		}
	}
	
	.noborder + table th,
	.noborder + table td{
		border: none;
	}
	.center + table td,
	.center + ul{
		text-align: center;
		img{ display: inline; }
	}

	/* direct direction
	--------------------------- */
	.empty{
		display: none;
	}
	.dcenter{
		text-align: center;
		img{ display: inline; }
	}
	.dcenter{
		td, th{
			text-align: center;
		}
	}

	/* Super Category: Item
	=========================== */
	.item_col2{
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		column-gap: 1.0rem;
	}
	.item_col3{
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		column-gap: 0.5rem;
	}
	.item_ulgrid + ul{
		list-style-type: none;
		display: grid;
		column-gap: 1rem;
		margin: 0;
		padding: 0;

		ul{
			list-style-type: none;
			margin: 0.5rem 0 1.0rem;
			padding: 0;
		}
	}
	.item_ulgrid.col2 + ul{ grid-template-columns: repeat(2, 1fr); }
	.item_ulgrid.col3 + ul{ grid-template-columns: repeat(3, 1fr); }
	.item_ulgrid.col4 + ul{ grid-template-columns: repeat(4, 1fr); }
	.item_ulgrid.col5 + ul{ grid-template-columns: repeat(5, 1fr); }

	/* gendai butdudan */
	.gendai_tile + ul{
		list-style-type: none;
		text-align: center;
		display: grid;
		margin: 0 0 3.0rem !important;
		padding: 0 !important;

		> li{
			border-width: 0 1px 1px 0;
			border-color: #ccc;
			border-style: solid;
			padding: 0.2rem 0.5rem;
		}

		ul{
			list-style-type: none;
			margin: 0;
			padding: 0 !important;

			li:nth-of-type(1){ font-weight: bold; }
		}
		img{ display: inline; }
	}
	.gendai_tile.col2 + ul{ 
		grid-template-columns: repeat(2, 1fr);
		> li:nth-of-type(2n){ border-right-width: 0; }
	}
	.gendai_tile.col3 + ul{
		grid-template-columns: repeat(3, 1fr);
		> li:nth-of-type(3n){ border-right-width: 0; }
	}

	/* traditional butdudan */
	.trad_tile + ul{
		list-style-type: none;
		text-align: center;
		display: grid;
		margin: 0 0 3.0rem !important;
		padding: 0 !important;

		> li{
			border-width: 0 1px 1px 0;
			border-color: #ccc;
			border-style: solid;
			padding: 0.2rem 0.5rem;
		}

		ul{
			list-style-type: none;
			margin: 0;
			padding: 0 !important;

			li:nth-of-type(1){ font-weight: bold; }
		}
		img{ display: inline; }
	}
	.trad_tile.col2 + ul{ 
		grid-template-columns: repeat(2, 1fr);
		> li:nth-of-type(2n){ border-right-width: 0; }
	}
	.trad_tile.col3 + ul{
		grid-template-columns: repeat(3, 1fr);
		> li:nth-of-type(3n){ border-right-width: 0; }
	}

	/* Super Category: Info
	=========================== */
	#InfoIndex{
		display: grid;
		grid-template-columns: 1fr 1fr;
		column-gap: 18px;
	}

	/* Category: Gokuyo */
	.gokuyo_col2{
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		column-gap: 18px;
	}
	.gokuyo_col3{
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		column-gap: 18px;
	}
	.gokuyo_ulgrid + ul{
		list-style-type: none;
		display: grid;
		column-gap: 1rem;
		margin: 0;
		padding: 0;

		ul{
			list-style-type: none;
			margin: 0.5rem 0 1.0rem;
			padding: 0;
		}
	}
	.gokuyo_ulgrid.col2 + ul{ grid-template-columns: repeat(2, 1fr); }
	.gokuyo_ulgrid.col3 + ul{ grid-template-columns: repeat(3, 1fr); }
	.gokuyo_ulgrid.col4 + ul{ grid-template-columns: repeat(4, 1fr); }

	/* Category: Osogon */
	#OsogonHead{
		display: grid;
		grid-template-columns: 1fr 1fr;
		column-gap: 18px;

		strong{
			display: block;
		}
	}
	#OsogonBody + ul{
		list-style-type: none;
		counter-reset: cnt;

		display: grid;
		grid-template-columns: 1fr 1fr;
		column-gap: 18px;

		margin: 0 0 3rem;

		strong{
			display: block;
		}
		ul{
			list-style-type: none;
		}
		> li > ul > li > strong:before{
			content: counter(cnt) ".";
			counter-increment: cnt;
			padding-right: 0.2rem;
		}
	}
	#OsogonFoot{
		display: grid;
		grid-template-columns: 1fr 1fr;
		column-gap: 18px;

		table{
			width: auto;
		}
	}
}