/*------------------------------
  画像付き吹き出し(会話)
------------------------------*/
/* 吹き出し 全体*/
.talking {
      margin-bottom:2em;
      position:relative;
}

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

/*アイコン*/
.talking figure {
      width:auto;     /*アイコンの横幅*/
      height:auto;    /*アイコンの縦幅*/
}

.talking-left_icon {
      float:left;
      margin-right:15px;    /*アイコンの右の余白(左の吹き出し)*/
}

.talking-right_icon {
      float:right;
      margin-left:15px;    /*アイコンの左の余白(右の吹き出し)*/
}

.talking figure img {
      width:auto;
      height:auto;
      margin:0;
}

/*アイコンの下の名前*/
.talking-left_icon figcaption ,
.talking-right_icon figcaption {
      padding:2px 0 0;
      font-size:12px;
      text-align:center;
}

/*吹き出しのセリフ部分*/
.talking-left , .talking-right  {
      position:relative;
      padding:10px;          /*内側の余白*/
      border-style:solid;    /*枠線の線種*/
      border-radius:10px;    /*セリフを入れる部分の角丸*/
      max-width: calc(50%);
}

.talking p {
      margin:0;
}

.talking p :last-child {
      margin:0;
}

/*---左の吹き出し---*/
.talking-left {
      float:left;
      border-width:2px;         /*枠線の太さ*/
      border-color:Black;   /*枠線の色*/
      background:white;    /*背景色*/
}

/*左の吹き出し 三角*/
.talking-left:before {
      position: absolute;
      content: '';
      border: 10px solid transparent;
      border-right: 10px solid Black;  /*三角の線になる部分*/
      top: 20px;
      left: -22px;
}

.talking-left:after {
      position: absolute;
      content: '';
      border: 10px solid transparent;
      border-right: 10px solid white;
      top: 20px;
      left: -19px;
}

/*---右の吹き出し---*/
.talking-right {
      float:right;
      border-width:2px;      /*枠線の太さ*/
      border-color:khaki;    /*枠線の色*/
      background:khaki;    /*背景色*/
}

/*右の吹き出し 三角*/
.talking-right:before {
      position: absolute;
      content: '';
      border: 10px solid transparent;
      border-left: 10px solid khaki;  /*三角の線になる部分*/
      top: 15px;
      right: -22px;
}

.talking-right:after {
      position: absolute;
      content: '';
      border: 10px solid transparent;
      border-left: 10px solid khaki;
      top: 15px;
      right: -19px;
}

/*---四角---*/

.talking-square_icon {
      float:left;
      margin-right:15px;    /*アイコンの右の余白(左の吹き出し)*/
}

/*吹き出しのセリフ部分*/
.talking-square_p ,.talking-square_b,.talking-square_y {
      position:relative;
      padding:5px;          /*内側の余白*/
      border-style:solid;    /*枠線の線種*/
      max-width: calc(75%);
}

.talking-square_p {
      float:left;
      border-width:2px;      /*枠線の太さ*/
      border-color:white;    /*枠線の色*/
      background:lightpink;    /*背景色*/
}
.talking-square_b {
      float:left;
      border-width:2px;      /*枠線の太さ*/
      border-color:white;    /*枠線の色*/
      background:lightblue;    /*背景色*/
}
.talking-square_y {
      float:left;
      border-width:2px;      /*枠線の太さ*/
      border-color:white;    /*枠線の色*/
      background:lightyellow;    /*背景色*/
}