@charset "UTF-8";

/* --------------------------------	 */
/* 			共通					 */
/* --------------------------------	 */
/* CSSキャンセル */
.article-body .mob_info p,
.mob_info p{
	margin-bottom:0;
}

.mob_info{
	font-size:0.9em;
}

/* mob情報の大枠 */
.mob_info{
	padding-bottom:5px;
	margin-bottom:1.5em;
}


/* --------------------------------	 */
/* 			タイトル				 */
/* --------------------------------	 */
.mob_info p.name{
	font-weight:bold;
	color:#000;
	margin-bottom:3px;
	font-size:1.5em;
	text-align:center;
	position:relative;
	margin:0 30px 10px 30px;
}
.mob_info p.name span{
	background:#cae4ff;
	display:block;
	padding:5px 10px;
	position:relative;
	z-index:2;
}

.mob_info p.name:before,
.mob_info p.name:after{
	position: absolute;
	z-index:1;
	bottom:-8px;
	display:block;
	content:'';
	border:1em solid #a5bbd2;
}
.mob_info p.name:before{
	left: -26px;
	border-left-width:15px;
	border-left-color:transparent;
}
.mob_info p.name:after{
	right:-26px;
	border-right-width:15px;
	border-right-color:transparent;
}

.mob_info p.name span:before,
.mob_info p.name span:after {
	position: absolute;
	bottom: -10px;
	display: block;
	width: 10px;
	height: 10px;
	content: '';
	border-style: solid;
	border-color: #3c4c5b transparent transparent transparent;
}
.mob_info p.name span:before {
	left: 0;
	border-width:8px 0 0 8px;
}
.mob_info p.name span:after {
	right: 0;
	border-width:8px 8px 0 0;
}


/* --------------------------------	 */
/* 		フレキシブルボックス		 */
/* --------------------------------	 */
/* 画像横のmob情報フレキシブルボックス */
.mob_info_right{
	display:flex;
	flex-wrap:wrap;
}
.mob_info_label, .mob_info_data{
	display:flex;
	align-items:center;
}


/* 画像下のmob情報フレキシブルボックス */
.mob_info_img_bottom_data{
	display:flex;
	flex-wrap:wrap;
}





/* --------------------------------	 */
/* 		mob画像						 */
/* --------------------------------	 */
.mob_info_left img{
	width:80%;
	margin-bottom:0;
}
.mob_info_left,
.mob_info_right .mob_info_label,
.mob_info_right .mob_info_data{
	margin-bottom:2px;
}
.mob_info_left img{
	margin:0 auto;
	display:block;
}

/* --------------------------------	 */
/* 		ID							 */
/* --------------------------------	 */
.mob_info_id{
	text-align:center;
	font-size:0.9em;
}
/* --------------------------------	 */
/* 		性質						 */
/* --------------------------------	 */
.mob_info_character{
	margin-top:10px;
	text-align:center;
	padding:5px 10px;
	margin-bottom:10px;
	border-radius:5px;
	line-height:1.5em;
	color:#fff;
}
.mob_info_character .title{
	font-size:1.2em;
	font-weight:bold;
}
.mob_info_character .description{
	font-size:0.9em;
}

/* 友好的 */
.chara_passive{
	background:#00a212;
}
/* 中立的 */
.chara_neutral{
	background:#9b8a00;
}
/* 敵対的 */
.chara_hostile{
	background:#d23129;
}


/* --------------------------------	 */
/* 		情報テーブル				 */
/* --------------------------------	 */
/* データ表示 */
.mob_info_right .mob_info_label,
.mob_info_right .mob_info_data{
	box-sizing: border-box;
}
.mob_info_right .mob_info_label{
	width:30%;
}
.mob_info_right .mob_info_data{
	width:70%;
}

/* ラベル */
.mob_info_label{
	background:#ffe8e8;
	justify-content:center;
	color:#000;
	font-weight:bold;
}

/* セル */
.mob_info_data{
	padding:5px 10px;
	line-height:1.5em;
}
.mob_info_data_pick{
	background:#f7f7f7;
}
.mob_info_data .mob_info_inner img{
	margin-right:0.3em;
}

/* 体力 */
.mob_info_life{
	font-size:1.1em;
}
.mob_info_life img{
	width:18px;
	height:auto;
	vertical-align:middle;
}

/* 攻撃力 */
.mob_info_atk .mob_info_inner img{
	width:12px;
	height:auto;
	margin-right:0;
}


/* -------------------------------------------------------	 */
/* 					PC表示の場合							 */
/* -------------------------------------------------------	 */
@media screen and (min-width:768px){

	/* --------------------------------	 */
	/* 		フレキシブルボックス		 */
	/* --------------------------------	 */
	/* 画像とmobデータのフレキシブルボックス */
	.mob_info_left_right{
		display:flex;
	}
	.mob_info_left{
		width:40%	
	}
	.mob_info_right{
		width:60%
	}

	/* データ表示 */
	.mob_info_right .mob_info_label{
		width:30%;
	}
	.mob_info_right .mob_info_data{
		width:70%;
	}


	/* --------------------------------	 */
	/* 			共通					 */
	/* --------------------------------	 */
	/* mob情報の大枠 */
	.mob_info{
		padding:15px 7px 10px 7px;
		border:solid 1px #333;
		border-radius:5px;
	}


	/* --------------------------------	 */
	/* 			タイトル				 */
	/* --------------------------------	 */
	.mob_info p.name{
		border-top-left-radius:5px;
		border-top-right-radius:5px;
		border:none;
		margin-bottom:20px;
	}


	/* --------------------------------	 */
	/* 		mob画像						 */
	/* --------------------------------	 */
	.mob_info_left{
		padding-right:10px
	}
	.mob_info_left,
	.mob_info_right .mob_info_label,
	.mob_info_right .mob_info_data{
		margin-bottom:3px;
	}


	/* --------------------------------	 */
	/* 		性質						 */
	/* --------------------------------	 */
	.mob_info_character{
		border-radius:20px;
		margin-left:10px;
		margin-right:10px;
		margin-bottom:0;
	}

}