/*--------------------
 吹き出しを作る
--------------------*/
@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;
	}

	.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(127,127,127,1);/*枠線 グレー*/
		background-color: rgba(255,255,255,1);/*背景 白色*/
		color: rgba(85, 85, 85, 1);/*文字 濃いグレー*/
	}

	.balloon-text-left {
		border-color: rgba(240,220,253,1);/*枠線 薄い薄紫*/
		background-color: rgba(255,255,255,1);/*背景 白色*/
		color: #767676;/*文字 少し濃いグレー*/
	}

	.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: 0px;
	}

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

/* 三角部分 */
	.balloon-text-right:before {
		position: absolute;
		content: '';
		border: 10px solid transparent;
		border-right: 10px solid rgba(35,186,235,1);/*吹き出し枠線 濃い水色*/
		top: 10px;
		left: -20px;
	}

	.balloon-text-right:after {
		position: absolute;
		content: '';
		border: 10px solid transparent;
		border-right: 10px solid rgba(255,255,255,1);/*吹き出し背景 白色*/
		top: 10px;
		left: -19px;
	}

	.balloon-text-left:before {
		position: absolute;
		content: '';
		border: 10px solid transparent;
		border-left: 10px solid rgba(255,255,255,1);/*吹き出し枠線 白色*/
		top: 10px;
		right: -20px;
	}

	.balloon-text-left:after {
		position: absolute;
		content: '';
		border: 10px solid transparent;
		border-left: 10px solid rgba(255,255,255,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: 100%;
		height: 100%;
		margin-left: -10px;
	}

	.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(35,186,235,1);/*枠線 濃い水色*/
		background-color: rgba(255,255,255,1);/*背景 白色*/
		color: rgba(85, 85, 85, 1);/*濃いグレー*/
	}

	.balloon-text-left {
		border-color: rgba(240,220,253,1);/*枠線 薄い薄紫*/
		background-color: rgba(240,220,253,1);/*背景 薄い薄紫*/
		color: #767676;/*少し濃いグレー*/
		margin-right: 20px;
	}

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

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

	.balloon p {
		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(35,186,235,1);/*吹き出し枠線 濃い水色*/
		top:7px;
		left: -19px;
	}

	.balloon-text-right:after {
		position: absolute;
		content: '';
		border: 10px solid transparent;
		border-right: 10px solid rgba(255,255,255,1);/*吹き出し背景 白色*/
		top:6px;
		left: -18px;
	}

	.balloon-text-left:before {
		position: absolute;
		content: '';
		border: 10px solid transparent;
		border-left: 10px solid rgba(240,220,253,1);/*吹き出し枠線 薄い薄紫*/
		top:3px;
		right: -15px;
	}

	.balloon-text-left:after {
		position: absolute;
		content: '';
		border: 10px solid transparent;
		border-left: 10px solid rgba(240,220,253,1);/*吹き出し背景 薄い薄紫*/
		top:3px;
		right: -15px;
	}

}