@charset "UTF-8";

/******************************************************************************
 * 呪文や特技データ
 * 次のようにテキストで書いておけばbuilddoc.jsでフォーマットされる。
 * 1行目はボールドでインデックス対象になる。
 * ［で始まり］で終わる行は<div>で囲まれる。
 * その他行は<p>で囲まれる。ただし、タグで囲まれた行はそのまま出力される。
 *	<div class="sp-data">
 *		〈特技名〉
 *		［宣言：不要］［使用：無制限：--］
 *		［効果］
 *		効果の説明…
 *		<div>タグが暑場合はそのまま出力される</div>
 *	</div>
 *****************************************************************************/
div.sp-data {
	margin-top: 1em;
	margin-bottom: 1em;
}

div.sp-data > div:first-child {
	font-weight: bold;
}

div.sp-data > div.sp-prms > span {
	display: inline-block;
}

/* JSのDBから生成した［効果］［説明］の場合 */
div.sp-data > div.sp-text {
	padding-left: 1em;
}

/* HTMLに直接書いたテキストデータの［効果］［説明］の場合 */
div.sp-data > p {
	padding-left: 1em;
	text-indent: 1em;
}

/* 先頭項目をヘッダとして残りがあふれる場合、項目単位で折り返す */
div.sp-data div.sp-multi {
	display: table;
}

/* mulilineの子 */
div.sp-multi > div {
	display: table-cell;
}

/* multilineの先頭要素 */
div.sp-multi > div:first-child {
	white-space: nowrap;
}

/* multilineの2番目以降の要素を囲むdiv */
div.sp-multi > div > div {
	display: flex;
	flex-wrap: wrap;
}

/* multilineの2番目以降の要素 */
div.sp-multi > div > div > div {
	flex: none;
}

/* データに直接書いたタグは<div class="sp-inner">で囲まれる */
div.sp-data div.sp-inner {
	padding-left: 1em;
}

/******************************************************************************
 * モンスターデータ
 * mst-dataはbuilddoc.jsでビルドの対象
 * mst-dataの子でないmst-statは静的、mst-dataの子のmst-statはビルドされる
 *****************************************************************************/
div.mst-data{
	margin-top: 1em;
}

div.mst-stat{
	margin-top: 1em;
	margin-bottom: 1em;
}

div.monster-stats{
	margin-top: 1em;
	margin-bottom: 1em;
}

/* スキルリスト */
div.mst-skills {
	padding-left: 1em;
}

div.mst-skills > div {
	display: inline-block;
	width: 14em;
}

/* 攻撃方法リスト */
div.mst-attack {
	padding-left: 2em;
}

/* 戦闘行動、特殊能力 */
div.monster-action {
	padding-left: 2em;
}

div.monster-action > dl {
	margin: 0;
}

div.monster-action > dl > dt {
	font-weight: normal;
}

div.monster-action > dl > dt::before {
	content: "〈";
}

div.monster-action > dl > dt::after {
	content: "〉";
}

@media screen and (max-width: 999px){
	/* モンスターデータ */
	div#LeveledIndex > div > div:nth-child(even) {
		line-height: 2em;
	}
}