/* カスタム CSS をここに入力してください */

/*============================================================
フキダシデザイン
============================================================*/
.arrow_answer{
position: relative;
background: #fff;
border: 1px solid #777;
margin: 10px;
padding: 10px;
border-radius: 15px;
margin-right: 95px;
max-width: 750px;
}
.arrow_question {
position: relative;
background: #fff;
border: 1px solid #777;
margin: 10px;
padding: 10px;
border-radius: 15px;
margin-left: 95px;
max-width: 750px;
}
.arrow_question {
float: right;
margin-right: 20px;
}
.arrow_answer:after,
.arrow_answer:before,
.arrow_question:after,
.arrow_question:before {
top: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.arrow_question:after,
.arrow_question:before { right: 100%; }
.arrow_answer:after,
.arrow_answer:before { left: 100%; }
.arrow_answer:after,
.arrow_question:after {
border-color: rgba(255, 255, 255, 0);
border-width: 8px;
margin-top: -8px;
}
.arrow_answer:after { border-left-color: #fff ; }
.arrow_question:after { border-right-color: #fff ; }
.arrow_answer:before,
.arrow_question:before {
border-color: rgba(200, 200, 200, 0);
border-width: 8px;
margin-top: -8px;
}
.arrow_answer:before { border-left-color: #000; }
.arrow_question:before { border-right-color: #000; }
.question_image { float: left; }
.answer_image {
float: right;
margin-right: 20px;
}
.answer_image img,
.question_image img { border-radius: 50px; }
.question_Box {
margin-bottom: 25px;
overflow: hidden;
}

/*******************************
* 左からの吹き出し　ここからLINE風の吹き出し
********************************/
.left_balloon {
    position: relative;
    background: #fff;
    border: 1px solid #777;
    margin: 10px;
    padding: 10px;
    border-radius: 15px;
    margin-right: 20%;
    clear: both;
    max-width: 500px;
    float: left;
}
.left_balloon:after,
.left_balloon:before {
    right: 100%;
    top: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}
.left_balloon:after {
    border-color: rgba(255, 255, 255, 0);
    border-right-color: #fff;
    border-width: 7px;
    margin-top: -7px;
}
.left_balloon:before {
    border-color: rgba(0, 0, 0, 0);
    border-right-color: #000;
    border-width: 8px;
    margin-top: -8px;
}
 
/*******************************
* 右からの吹き出し
********************************/
.right_balloon {
    position: relative;
    background: #fff;
    border: 1px solid #777;
    margin: 10px;
    padding: 10px;
    border-radius: 15px;
    margin-left: 20%;
    clear: both;
    max-width: 500px;
    float: right;
}
.right_balloon:after,
.right_balloon:before {
    left: 100%;
    top: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}
.right_balloon:after {
    border-color: rgba(133, 226, 73, 0);
    border-left-color: #fff;
    border-width: 7px;
    margin-top: -7px;
}
.right_balloon:before {
    border-color: rgba(0, 0, 0, 0);
    border-left-color: #000;
    border-width: 8px;
    margin-top: -8px;
}
 
/*******************************
* 割り込みを解除　ここまでLINE風の吹き出し
********************************/
.clear_balloon{
  clear: both;
}