@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Template:   cocoon-master
Version:    1.0.6
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

/*吹き出しをカスタマイズ*/
.speech-balloon{
  margin-left: 5px!important;/*左の余白*/
  margin-right: 5px!important;/*右の余白*/
  margin-top: 15px!important;
  float:left;
  max-width: calc(100% - 140px);/*設定したキャラの大きさ +　左右の余白*/
}

.sbp-r .speech-balloon{
  float:right;
}

.speech-person{
  width: 130px;/*キャラの大きさ*/
}


/*480px以下*/
@media screen and (max-width: 480px){
  .speech-balloon{
    max-width: calc(100% - 80px);/*設定したキャラの大きさ +　左右の余白*/
  }
  .speech-person {
    width: 70px;/*キャラの大きさ*/
}
}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1240px以下*/
@media screen and (max-width: 1240px){
  /*必要ならばここにコードを書く*/
}

/*1030px以下*/
@media screen and (max-width: 1030px){
  /*必要ならばここにコードを書く*/
}

/*768px以下*/
@media screen and (max-width: 768px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}
.example table, .example th, .example td {border: none ;}