/*=====吹き出しtypeBase=====================*/
.matCom{
display: inline-block;
box-sizing: border-box;
position:relative;
bottom:-20px;
left:20px;
margin-top:-25px;
margin-bottom:10px;
padding: 12px 30px 12px 30px;
color:#fff;
background-color:#32bed2;
border:4px solid #fff;
border-radius:30px;
-webkit-box-shadow:0 2px 6px 0 rgba(0,0,0,0.15);/*safari5.0以下*/
box-shadow:0 2px 6px 0 rgba(0,0,0,0.15);
z-index: 1;
}
.matCom1,.matCom2{
height:55px;
z-index:100;
}
.matCom3,.matCom4{
width: 840px;
bottom:-14px!important;
z-index:100;
}
/*fukidashi*/
.matCom::before{
display: block;
content: "";
width:30px;
height: 19px;
position: absolute;
bottom:-19px;
left:36px;
background: url("/cmn_web/img/front/markupBalloonPC.png");
background-size: 30px 18px;
background-repeat:no-repeat;
}
/*=====詳細typeBase===========================*/
.matComD{
box-sizing: border-box;
width:1024px;
border: 3px solid #32bed2;
border-radius:8px;
background-color:#ffffd8;
-webkit-box-shadow:0px 2px 6px 0px rgba(0,0,0,0.15);
box-shadow:0px 2px 6px 0px rgba(0,0,0,0.15);
margin-top: 30px;
}
.matComDTop{
color:#ffffff;
background-color:#32bed2;
padding:8px 0 12px;
box-sizing: border-box;
height: 38px;
}
.matComD3 .matComDTop,
.matComD4 .matComDTop{
height: 41px;
}/*下枠線3px分追加*/
/*=====parts=================================*/
/*===TopIn===*/
.matComTopIn{
display: table;
}
.matComHeart,
.matComHead{
display: table-cell;
}
/*吹き出しtype2,4
位置調整*/
.matCom2 .matComTopIn,
.matCom4 .matComTopIn{
padding-left:60px;
}
/*詳細type*/
.matComD .matComTopIn{
margin:0 auto;/*中央寄せ*/
}
/*===FaceIcon===*/
.matComFace{
width:46px;
height:46px;
border-radius:50%;
border: 1px solid #ffffff;
background-size:46px auto;
-webkit-box-shadow:0px 2px 4px 3px rgba(0,0,0,0.1);/*safari5.0以下*/
box-shadow:0px 2px 4px 3px rgba(0,0,0,0.1);
margin-right:10px;/*位置調整*/
}
/*吹き出しtype*/
.matCom .matComFace{
position: absolute;
left:30px;
top:-12px;
}
/*詳細type*/
.matComD .matComTopIn{
position: relative;
}
.matComD .matComFace{
position: absolute;
top:-25px;
}
.matComD4 .matComFace{
top:-27px;
}
/*===heart===*/
/*位置調整*/
.matComHeart{
padding:0 8px 0 0;
}
.matComHeart img{
vertical-align: baseline;
}
.matComD2 .matComHeart,
.matComD4 .matComHeart{
padding-left:60px;
}
/*===Head===*/
.matComHead{
font-weight:bold;
font-size:12px;
}
.matComStrong{
font-size:16px;
}
/*===Msg===*/
.matComMsg{
width: 772px;
}
.matComBottom{
padding-top:10px; 
}
.matComD .matComMsg{
padding:15px 30px;
width:auto;
}