@charset "utf-8";
p.main_img,p.bottom_img{margin:0 auto 2%;width:100%;text-align:center}
main{font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif}
.arrow_answer,
.arrow_question {
    position: relative;
    display:inline-block;
    background: #fff;
    border-radius: 10px;
    width:78%;
    padding:1.7% 3%;
    font-size:19px;
    background:#4CAF50;
    color: #fff;
    line-height:24px;

}
.main{font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif}
.arrow_answer,
.arrow_question {
    position: relative;
    display:inline-block;
    background: #fff;
    border-radius: 10px;
    width:78%;
    padding:1.7% 3%;
    font-size:19px;
    background:#4CAF50;
    color: #fff;
    line-height:24px;

}
.main h2{
    margin: 2% 2% -2px;
    font-weight: bold;
    font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif
}
.arrow_answer{
    text-align:left;
    background:#9C27B0;
}

.arrow_answer:after,
.arrow_answer:before,
.arrow_question:after,
.arrow_question:before {
    top: 30%;
    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:#9C27B0}
.arrow_question:after{border-right-color:#4CAF50}
.arrow_answer:before,
.arrow_question:before {
    border-color: rgba(200, 200, 200, 0);
    border-width: 9px;
    margin-top: -9px;
}
.arrow_answer:before{border-left-color:#c8c8c8}
.arrow_question:before {border-right-color:#c8c8c8}
.question_image,.answer_image{
    display:inline-block;
     width:10%;
     vertical-align:top;
}
.answer_image img,
.question_image img{
    display: block;
    margin: 0 auto;
    max-width: 60px;
    width: 100%;
}
.answer_Box{
     width:92%;
     text-align:right;
     margin:0 auto 4%;
}
.question_Box{
     width:94%;
     text-align:left;
     margin:0 auto 4%;
}

@media screen and (max-width:480px) {
    .main h2{width:90%}
    .question_Box,.answer_Box{
        width:94%;
        margin-left:3%;
        margin-right:3%;
        margin-bottom:6%;
    }
    .question_image,.answer_image{
     vertical-align:top;
     width:15%;
    }
    .question_image{
     margin-right:10px;
    }
    .answer_image{
     margin-left:10px;
    }



}