/*　真ん中　テープ留め風　囲み枠1 */
.box7 {
 background-color: #f7efff; /*枠背景色*/
 border: 1px solid #dbb7ff; /*枠太さ・色*/
 color: #333;/* 文字色 */
 list-style: none;
 position: relative;
 margin: 12px auto;
 padding: 10px 10px 10px 9px;
 width: 94%;
}
.box7:before {
 content: "";
 background-color: #9932cc; /*テープの色*/
 opacity: 0.1; /*テープ透明度0～1*/
 position: absolute;
 top: -1.5em;
 left: 40%;
 width: 100px; /*テープの幅*/
 height: 30px;
 transform: rotate( -10deg );
}

/*　真ん中　テープ留め風　囲み枠２ */
.box8 {
 background-color: #eff2ff; /*枠背景色*/
 border: 1px solid #b7cdff; /*枠太さ・色*/
 color: #333;/* 文字色 */
 list-style: none;
 position: relative;
 margin: 12px auto;
 padding: 10px 10px 10px 9px;
 width: 94%;
}
.box8:before {
 content: "";
 background-color: #3274cc; /*テープの色*/
 opacity: 0.1; /*テープ透明度0～1*/
 position: absolute;
 top: -1.5em;
 left: 40%;
 width: 100px; /*テープの幅*/
 height: 30px;
 transform: rotate( -10deg );
}



/*Chat Bubbles　CSS Setting*/
/* 全体のスタイル */
.voice {
  margin-bottom: 40px;
}
/* 左画像 */
.voice-img-left {
  margin-left: 4px;
  margin-top: -1px;
  float: left;
  width: 60px;
  height: 60px;
}
/* 右画像 */
.voice-img-right {
  margin-right: 4px;
  margin-top: -1px;
  float: right;
  width: 60px;
  height: 60px;
}
.voice figure img {
  width: 100%;
  height: 100%;
  border: 2px solid #eee;
  border-radius: 50%;
  margin: 0;
}
/* 画像の下のテキスト */
.voice-img-description {
  padding: 5px 0 0;
  font-size: 10px;
  text-align: center;
}
/* 左からの吹き出しテキスト */
.voice-text-right {
  color: #444;
  position: relative;
  margin-left: 100px;
  padding: 1.2em;
  border: 3px solid #eee;
  background-color: #ff99ff;
  border-radius: 5px;
}
/* 右からの吹き出しテキスト */
.voice-text-left {
  position: relative;
  margin-right: 100px;
  padding: 1.2em;
  border: 3px solid #eee;
  background-color: #6CC655;
  border-radius: 5px;
}
p.voice-text {
  margin: 0 0 8px;
}
p.voice-text:last-child {
  margin-bottom: 0px;
}
/* 左の三角形を作る */
.voice-text-right:before {
  position: absolute;
  content: '';
  border: 10px solid transparent;
  border-right: 10px solid #eee;
  top: 15px;
  left: -20px;
}
.voice-text-right:after {
  position: absolute;
  content: '';
  border: 10px solid transparent;
  border-right: 10px solid #fff;
  top: 15px;
  left: -16px;
}
/* 右の三角形を作る */
.voice-text-left:before {
  position: absolute;
  content: '';
  border: 10px solid transparent;
  border-left: 10px solid #eee;
  top: 15px;
  right: -23px;
}
.voice-text-left:after {
  position: absolute;
  content: '';
  border: 10px solid transparent;
  border-left: 10px solid #fff;
  top: 15px;
  right: -19px;
}
/* 回り込み解除 */
.voice:after,.voice:before {
  clear: both;
  content: "";
  display: block;
}