/*--------------------
 吹き出しを作る
--------------------*/
@media screen and (min-width:480px) {

	.balloon {
		margin-bottom: 0.7em;
		position: relative;
		margin-left: 0px;/*吹き出し位置調整*/
	}

	.balloon:before,.balloon:after {
		clear: both;
		content: "";
		display: block;
	}

	.balloon figure {
		width: 80px;
		height: 80px;
	}

	.balloon-image-left {
		float: left;
		margin-right: 20px;
		margin-top: -2px;
	}

	.balloon-image-right {
		float: right;
		margin-left: 20px;
	}

	.balloon figure img {
		width: 100%;
/*		height: 100%;*/
		margin: 0;

/*
		border: 1px solid #aaa;
		border-radius: 50%;
 */
		margin: 0;
		/*box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.32);*/
	}

	.balloon-image-description {
		padding: 5px 0 0;
		font-size: 10px;
		text-align: center;
	}

	.balloon-text-right,.balloon-text-left {
		position: relative;
		padding: 5px 5px 10px 10px;
		border: 1px solid;
		border-radius: 10px;
		/*max-width: -webkit-calc(100% - 50px);
		max-width: calc(100% - 50px);*/
		/*width:80%;*/
		display: inline-block;
		box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.32);/*影*/
	}

	.balloon-text-right {
		border-color: rgba(84,130,53,1);
		background-color: rgba(242,242,242,1);
		color: rgba(128,128,128,1);
	}

	.balloon-text-left {
		border-color: rgba(255,217,102,1);
		background-color: rgba(255,230,153,1);
		color: rgba(128,128,128,1);
	}

	.balloon-text-right {
		float: left;
		/*width:650px;*//* そら吹き出し長さ */
		width:780px;/* そら吹き出し長さ */
	}

	.balloon-text-left {
		float: right;
		width:auto;/* ユーザ吹き出し長さ */
		margin-right: -20px;
		max-width: 780px;
	}

	.balloon p {
		/*margin: 0 0 10px;*/
		margin:0px;
	}

	.balloon p:last-child {
		margin-bottom: 0;
	}


/* 三角部分 */
	.balloon-text-right:before {
		position: absolute;
		content: '';
		border: 10px solid transparent;
		border-right: 10px solid rgba(84,130,53,1);
		top: 10px;
		left: -20px;
	}

	.balloon-text-right:after {
		position: absolute;
		content: '';
		border: 10px solid transparent;
		border-right: 10px solid rgba(242,242,242,1);
		top: 10px;
		left: -19px;
	}

	.balloon-text-left:before {
		position: absolute;
		content: '';
		border: 10px solid transparent;
		border-left: 10px solid rgba(255,217,102,1);
		top: 10px;
		right: -20px;
	}

	.balloon-text-left:after {
		position: absolute;
		content: '';
		border: 10px solid transparent;
		border-left: 10px solid rgba(255,230,153,1);
		top: 10px;
		right: -19px;
	}

}


@media screen and (max-width:480px) {
	.balloon {
		margin-bottom: 0.3em;
		position: relative;
	}

	.balloon:before,.balloon:after {
		clear: both;
		content: "";
		display: block;
	}

	.balloon figure {
		width: 60px;
		height: 60px;
		margin-left: auto;
		margin-right: auto;
		margin-top: -5px;
	}

	.balloon-image-left {
		float: left;
		margin-right: 20px;
	}

	.balloon-image-right {
		float: right;
		margin-left: 20px;
	}

	.balloon figure img {
		width: 75%;
/*		height: 75%;*/
		margin-left: -10px;

/*
		border: 1px solid #aaa;
		border-radius: 50%;
 */
		margin: 0;

		/*box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.32);*/
	}

	.balloon-image-description {
		padding: 5px 0 0;
		font-size: 9pt;
		text-align: center;
	}

	.balloon-text-right,.balloon-text-left {
		position: relative;
		padding: 5px 5px 10px 10px;
		border: 1px solid;
		border-radius: 10px;
		max-width: -webkit-calc(75% - 40px);
		/*max-width: calc(75% - 40px);*/
		max-width: calc(85% - 40px);
		display: inline-block;
		box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.32);/*影*/
		word-wrap: break-word;/*長いURLなどの折り返し*/
	}

	.balloon-text-right {
		border-color: rgba(84,130,53,1);
		background-color: rgba(242,242,242,1);
		color: rgba(128,128,128,1);
	}

	.balloon-text-left {
		border-color: rgba(255,217,102,1);
		background-color: rgba(255,230,153,1);
		color: rgba(128,128,128,1);
		margin-right: 20px;
	}

	.balloon-text-right {
		float: left;
		width: 70%;
	}

	.balloon-text-left {
		float: right;
	}

	.balloon p {
		/*margin: 0 0 10px;*/
		margin:0px;
	}

	.balloon p:last-child {
		margin-bottom: 0;
	}

/* 三角部分 */
	.balloon-text-right:before {
		position: absolute;
		content: '';
		border: 9px solid transparent;
		/*border-right: 10px solid rgba(255,255,255,1);/*吹き出し枠線色*/
		border-right: 10px solid rgba(84,130,53,1);
		top:7px;
		left: -19px;
	}

	.balloon-text-right:after {
		position: absolute;
		content: '';
		border: 10px solid transparent;
		border-right: 10px solid rgba(242,242,242,1);
		top:6px;
		left: -18px;
	}

	.balloon-text-left:before {
		position: absolute;
		content: '';
		border: 10px solid transparent;
		border-left: 10px solid rgba(255,217,102,1);
		top:4px;
		right: -20px;
	}

	.balloon-text-left:after {
		position: absolute;
		content: '';
		border: 10px solid transparent;
		border-left: 10px solid rgba(255,230,153,1);
		top:4px;
		right: -19px;
	}



}