/******************************************************************************
 *	シナリオ構成図部品
 *****************************************************************************/

/*
 *	シナリオ構成図領域
 */
div.ScenarioDiagram{
	position: relative;
}

/*
 *	シナリオ構成図部品
 *	内部にサブシーンを含むシーン
 */
div.SceneBox {
	position:relative;
	border: 2px solid gray;
	border-radius: 5px;
	margin: 0 auto;
	width: -moz-max-content;
	width: -webkit-max-content;
	width: max-content;
}

/*
 *	シナリオ構成図部品
 *	内部にサブシーンを含まないシーン
 */
div.EventBox {
	position:relative;
	border: 1px solid gray;
	border-radius: 5px;
	margin: 0 auto;
	padding: 0.25em 0.5em;
	width: -moz-max-content;
	width: -webkit-max-content;
	width: max-content;
}

div.SceneBox > div:nth-child(2) {
	margin-top: 0.5em;
}

div.SceneBox > div:last-child {
	margin-bottom: 0.5em;
}

/*
 *	シナリオ構成図部品
 *	シーン領域のタイトル
 */
div.SceneTitle {
	position: relative;
	background-color: lightgray;
	text-align: center;
	padding: 0.125em 0.5em;
}

/*
 *	シナリオ構成図部品
 *	シーン領域のボディ。この中にイベントかシーングループを配置する。
 */
div.SceneBody {}

/*
 *	シナリオ構成図部品
 *	並列化されるシーンをグループ化する領域
 */
div.SceneGroup {
	vertical-align: top;
	padding: 3px;
	border: 1px dashed gray;
	border-radius: 5px;
	width: -moz-max-content;
	width: -webkit-max-content;
	width: max-content;
}

/*
 *	シナリオ構成図部品
 *	並列化要素
 */
div.Para {
	padding: 3px;
	display:inline-block;
}

/*
 *	シナリオ構成図部品
 *	下三角矢印
 */

/* 下三角矢印だけを単独表示 */
div.DownTriangle {
	position: relative;
	margin: 0 auto;
	height:0px;
	width:0px;
	border-top:10px solid gray;
	border-left:20px solid transparent;
	border-right:20px solid transparent;
	border-bottom:0px solid transparent;
}

/* 2つ目以降のイベント、イベントグループボックスに▼をつけるための隙間 */
div.SceneBody > div:nth-child(n+2), div.ScenarioDiagram > div:nth-child(n+2) {
	margin-top: 9px;
}

/* 2つ目以降のイベント、イベントグループボックスに▼をつける */
div.SceneBody > div:nth-child(n+2)::before, div.ScenarioDiagram > div:nth-child(n+2)::before {
	content: "";
	position: absolute;
	left: 50%;
	margin-left: -20px;
	top: -11px;
	border-top:10px solid gray;
	border-left:20px solid transparent;
	border-right:20px solid transparent;
	border-bottom:0px solid transparent;
}

/******************************************************************************
 *	領域定義
 *****************************************************************************/

/*
 *	NPC情報記述領域
 */
div.NpcBox {
	margin-left:1em;
	margin-bottom: 1em;
	position: relative;
}

/*
 *	NPCの名前
 */
div.NpcName {
	background-color: #F0F0F0;
	font-weight: bold;
}

/*
 *	シナリオ中のパラメータ
 */
div.ScenarioParam {
	margin: 1em;
	border: solid black 1px;
}

/*
 *	注意書き
 */
div.Attention {
	margin: 1em;
	padding: 0.5em;
	position: relative;
	background-color: #FFCCCC;
	border-radius: 5px;
	border: 1px solid red;
}