/*背景*/
body {
    background-image: url("../img/jpg/bg_wave.jpg");
}
span{
    display: inline-block;
}
.inner {
    position: relative;
    max-width: 960px;/*指定あり*/
    width: 100%;
    margin: auto;
    padding: 0;
    /* background: #2222;*/
}

/*吹き出し*/
/*共通*/
.balloon { 
    opacity: 0;
    overflow: hidden;
    margin: 0;
    word-break:break-all;
    transition: all 0.35s cubic-bezier(0.175,0.885,0.32,1.275);/*フワッと感の微調整*/
   
}
.balloon p{
    margin: 10px; 
    text-align: left;
}
@media screen and (max-width: 768px){
    .balloon p{
        margin: 5px; 
        font-size: 14px;    
    }
}
.serif-right,
.serif-left {
    display: inline-block;
    position: relative;
    top:0;
    left: 0;
    max-width: 580px;
    width: 80%; 
    padding: 10px;
    border-radius: 10px;
}
.serif-right:after,
.serif-left:after {
    content: "";
    position: absolute;
    bottom: 0px;
}
/* 共通 end */
    
/* 右の吹き出し */
.serif-right {
    float: right;
    margin: 25px 50px 0 0;
    background: #fff;
}   
.serif-right:after {
    background: url(../img/png/voice_serif_R.png);
    background-repeat: no-repeat;
    background-size: cover;
    width: 40px;
    height: 30px;
    right: -40px;
    bottom: 10px;
}
@media screen and (max-width: 768px){
    .serif-right{
        margin: 25px 20px 0 0;
    }
    .serif-right:after{
        width: 30px;
        height: 20px;
        right: -25px;
    }
}
 
/* 左の吹き出し */
.serif-left{
    float: left;
    margin: 50px 0 0 50px;
    background: #B4CFE6;
}
.serif-left:after{
    background: url(../img/png/voice_serif_L.png);
    background-repeat: no-repeat;
    background-size: cover;
    width: 40px;
    height: 30px;
    left: -40px;
    bottom: 10px;
}
@media screen and (max-width: 768px){
    .serif-left{
        margin: 50px 0 0 20px;
    }
    .serif-left:after{
        width: 30px;
        height: 20px;
        left: -25px;
    }
}

/* clear */
.clear {
    content: "";
    clear: both; 
    display: block;
}
  

/*動き 跳ね具合*/
.popjump {
	animation: popjump 0.5s;
}
@keyframes popjump {
	0% { transform: translate3d(0,0,0); }
	20% { transform: translate3d(0,-5%,0); }
	60% { transform: translate3d(0,0,0); }
}