@charset "UTF-8";
/* CSS Document */

/*--------------------
 吹き出し設定 ［共通］
--------------------*/
.baroon_wrap,
.baroon_wrapL,
.baroon_wrapR{
position:  relative;
margin-left: auto;
margin-right: auto;
}

.baroon_wrapR img{
float: right;
}

/*-------------------------
 見出しの吹き出し共通［なす］
-------------------------*/
.baloon_h2{
    position:relative;
    margin-left: 70px;
    width:auto;
    background:#00afd4;
    text-align:center;
    border:2px solid #000000;
    color:#FFFFFF;
    font-size:16px;
    font-weight:bold;
    border-radius:50px;
    -webkit-border-radius:50px;
    -moz-border-radius:50px;
}
.baloon_h2:after,.baloon_h2:before{
    border: solid transparent;
    content:'';
    height:0;
    width:0;
    pointer-events:none;
    position:absolute;
    right:100%;
    top:47%;
}
.baloon_h2:after{
    border-color: rgba(238, 72, 65, 0);
    border-top-width:5px;
    border-bottom-width:5px;
    border-left-width:14px;
    border-right-width:14px;
    margin-top: -5px;
    border-right-color:#00afd4;
}
.baloon_h2:before{
    border-color: rgba(0, 0, 0, 0);
    border-top-width:7px;
    border-bottom-width:7px;
    border-left-width:19px;
    border-right-width:19px;
    margin-top: -7px;
    margin-right: -0px;
    border-right-color:#000000;
}

/* ------------------------------------ */



/*------------------------------
 見出しの吹き出し共通［なすの質問］
-----------------------------------*/
.baloon_nasuQ{
    position:relative;
    margin-left: 170px;
    width:auto;
    background:#ffffff;
    text-align:left;
    border:2px solid #583707;
    color:#583707;
    font-size:16px;
    font-weight:bold;
    border-radius:10px;
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
}
.baloon_nasuQ:after,
.baloon_nasuQ:before{
    border: solid transparent;
    content:'';
    height:0;
    width:0;
    pointer-events:none;
    position:absolute;
    right:100%;
    top:40%;
}
.baloon_nasuQ:after{
    border-color: rgba(238, 72, 65, 0);
    border-top-width:5px;
    border-bottom-width:5px;
    border-left-width:14px;
    border-right-width:14px;
    margin-top: -5px;
    border-right-color:#ffffff;
}
.baloon_nasuQ:before{
    border-color: rgba(0, 0, 0, 0);
    border-top-width:7px;
    border-bottom-width:7px;
    border-left-width:19px;
    border-right-width:19px;
    margin-top: -7px;
    margin-right: -0px;
    border-right-color:#583707;
}

/* ------------------------------------ */




/*------------------------------
 見出しの吹き出し共通［たまのの回答］
-----------------------------------*/
.baloon_tamaA{
    position:relative;
    margin-right: 170px;
    width:auto;
    background:#cceff6;
    text-align:left;
    border:2px solid #583707;
    color:#583707;
    font-size:16px;
    font-weight:bold;
    border-radius:10px;
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
}
.baloon_tamaA:after,
.baloon_tamaA:before{
    border: solid transparent;
    content:'';
    height:0;
    width:0;
    pointer-events:none;
    position:absolute;
    left:100%;
    top:40%;
}
.baloon_tamaA:after{
    border-color: rgba(253, 237, 236, 0);
    border-top-width:7px;
    border-bottom-width:7px;
    border-left-width:17px;
    border-right-width:17px;
    margin-top: -7px;
    border-left-color:#cceff6;
}
.baloon_tamaA:before{
    border-color: rgba(0, 68, 125, 0);
    border-top-width:9px;
    border-bottom-width:9px;
    border-left-width:21px;
    border-right-width:21px;
    margin-top: -9px;
    margin-left: 2px;
    border-left-color:#583707;
}


/* ------------------------------------ */





/*------------------------------------------------------------------------
mobyle設定
------------------------------------------------------------------------*/

/*-------------------------
 見出しの吹き出し共通［なす］
-------------------------*/
.baroon_wrap {
    margin-top: 50px;
}
.baroon_wrap span img{
width:36px;
}

.baloon_h2{
    margin-left: 60px;
}

/*--------------------
 吹き出し［共通］
 mobyle
--------------------*/
.baroon_wrap,
.baroon_wrapL,
.baroon_wrapR{
width: 95%;
line-height: 110%;
}

.baroon_wrapL span img,
.baroon_wrapR span img
{
width:65px;
}

/*-------------------------
 見出しの吹き出し［なす］
-------------------------*/

/*--吹き出し全体の位置調整とアキ-*/
.baloon_h2{
    padding:12px;
    top:-50px;
    margin-left:58px;
    }


/*-----------------------------
 吹き出し［なすの質問］［たまの回答］
-----------------------------*/

/*--吹き出し全体の位置調整とアキ--*/
.baloon_nasuQ,.baloon_tamaA{
    padding:14px;
}

.baloon_nasuQ{
    margin-bottom:-20px;
}

.baloon_tamaA{
    margin-bottom:40px;
}


.baloon_nasuQ{
    top:-43px;
    margin-left:80px;
}

.baloon_tamaA{
    top:0px;
    margin-right:86px;
}

/*--三角の位置調整-*/
.baloon_nasuQ:before,
.baloon_nasuQ:after,
.baloon_tamaA:before,
.baloon_tamaA:after{
            top:15%;
}


/*------------------------------------------------------------------------
PC設定
------------------------------------------------------------------------*/
@media (min-width:900px){


/*-------------------------------
吹き出し［共通］
 PC
-------------------------------*/
    .baroon_wrap {
        margin-bottom: -20px;
    }
.baroon_wrap,
.baroon_wrapL,
.baroon_wrapR{
width:100%;
line-height: 140%;
}

 /*--見出しの吹き出しの横幅--*/
.baroon_wrap{       
width: 28em;
}

/*--会話の吹き出しの横幅--*/
.baroon_wrapL,
.baroon_wrapR{
width: 53em;
}


/*--吹き出しのアイコン画像サイズ--*/
/*--見出しのなす--*/
.baroon_wrap span img{
width:48px;
}

/*--会話のなすとたまねぎ--*/
.baroon_wrapL span img,
.baroon_wrapR span img{
width:120px;
}


/*-------------------------
 見出しの吹き出し［なす］
-------------------------*/

/*--吹き出し全体の位置調整とアキ-*/
.baloon_h2{
    padding:16px;
    top:-65px;
    margin-left:68px;
    }

/*-----------------------------
 吹き出し［なすの質問］［たまの回答］
-----------------------------*/
.baloon_nasuQ,
.baloon_tamaA{
    margin-right: 140px;
    margin-left: 140px; 
    padding:20px 30px;
}

.baloon_nasuQ{
    margin-bottom:-36px;
}

.baloon_tamaA{
    margin-bottom:10px;
}

/*--三角の位置調整-*/
.baloon_nasuQ:before,
.baloon_nasuQ:after,
.baloon_tamaA:before,
.baloon_tamaA:after{
top:30%;
}


/*--吹き出し全体の位置調整とアキ--*/
.baloon_nasuQ{
top:-70px;
}

/*--吹き出し全体の位置調整とアキ--*/
.baloon_tamaA{
    top:-10px;
}

}
/*------------------------------------------------------------------------*/