@charset "utf-8";
/* CSS Document */

/*コメントの設定*/
.comments {
	margin-bottom: 15px;
}

.comments li:first-child a {
	color: #CC0000;
	font-weight: bold;
}

.comments img:first-child {
	border-radius: 100px;
}

.comments .visitor img {
	float: left;
}

.comments .webmaster img {
	float: right;
}

.comments ul {
	list-style-type: none;
	margin: 0 62px 15px 62px;

	position: relative;
	padding: 10px 20px;
	border: 2px solid #CCC;
	border-radius: 10px;
/*	display: inline-block;*/

}

.visitor{
/*	position: relative;*/
}
/*
#comments .visitor ul {
	margin-left: 62px;
/*	position: absolute;
	top:0;*/
/*
}
#comments .webmaster ul {
	margin-right: 62px;
}
*/
/*マスターのアイコンだけ背景画像で設定する方法。コメント枠を可変にしてもカラム落ちしなくなる
.webmaster{
	background-image: url("https://yt3.ggpht.com/-wml5SQd7VuI/AAAAAAAAAAI/AAAAAAAAAAA/j3DKzSIFZSo/s48-c-k-no-mo-rj-c0xffffff/photo.jpg");
	background-repeat:no-repeat;
	background-position: right top;
}*/

/*吹き出しの>設定*/
.visitor ul:before {
	position: absolute;
	top: 20px;
	left: -16px;
	content: "";
	display: block;
	border: 5px solid transparent;
	border-right: 10px solid #ccc;
	width: 0;
	height: 0;
}

.visitor ul:after {
	position: absolute;
	top: 20px;
	left: -11px;
	content: "";
	display: block;
	border: 5px solid transparent;
	border-right: 10px solid #fff;
	width: 0;
	height: 0;
}

.webmaster ul:before {
	position: absolute;
	top: 20px;
	right: -16px;
	content: "";
	display: block;
	border: 5px solid transparent;
	border-left: 10px solid #ccc;
	width: 0;
	height: 0;
}

.webmaster ul:after {
	position: absolute;
	top: 20px;
	right: -11px;
	content: "";
	display: block;
	border: 5px solid transparent;
	border-left: 10px solid #fff;
	width: 0;
	height: 0;
}

.comments li:first-child {

	margin-right: 10px;
float: left;
}

.comments li:nth-child(2) {
	font-size:0.875rem;
float: left;

}

.comments li:last-child {
clear: left;
}