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


.balloonGai {
  position: relative;
  display: inline-block;
  margin: 1.5em 0;
  padding: 7px 10px;
  width: 228px;
  color: #333;
  background: linear-gradient(-135deg, #ffa4c3, #ffdde8, #ffa4c3);
  border: 1px solid #e7316e;
  border-radius: 10px;
  text-align: center;
}
.balloonGai:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -6px;
  border: 6px solid transparent;
  border-top: 6px solid #e7316e;
}
.balloonGai p {
  margin: 0;
  padding: 0;
  font-weight: bold;
}

.balloonNai {
  position: relative;
  display: inline-block;
  margin: 1.5em 0;
  padding: 7px 10px;
  width: 228px;
  color: #333;
  background: linear-gradient(-135deg, #56df5c, #bbf6be, #56df5c);
  border: 1px solid #129a19;
  border-radius: 10px;
  text-align: center;
}
.balloonNai:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -6px;
  border: 6px solid transparent;
  border-top: 6px solid #129a19
}
.balloonNai p {
  margin: 0;
  padding: 0;
  font-weight: bold;
}


/* 枠タイプ */
  .balloon2 {
    position: relative;
    display: inline-block;
    margin: 1.5em 0;
    padding: 7px 10px;
    min-width: 120px;
    max-width: 100%;
    color: #555;
    font-size: 16px;
    background: #FFF;
    border: solid 3px #555;
    box-sizing: border-box;
  }
  .balloon2:before {
    content: "";
    position: absolute;
    bottom: -24px;
    left: 50%;
    margin-left: -15px;
    border: 12px solid transparent;
    border-top: 12px solid #FFF;
    z-index: 2;
  }
  .balloon2:after {
    content: "";
    position: absolute;
    bottom: -30px;
    left: 50%;
    margin-left: -17px;
    border: 14px solid transparent;
    border-top: 14px solid #555;
    z-index: 1;
  }
  .balloon2 p {
    margin: 0;
    padding: 0;
  }

  .balloon2-right {
    position: relative;
    display: inline-block;
    margin: 1.5em 15px 1.5em 0;
    padding: 7px 10px;
    min-width: 120px;
    max-width: 100%;
    color: #555;
    font-size: 16px;
    background: #FFF;
    border: solid 3px #555;
    box-sizing: border-box;
  }
  .balloon2-right:before {
    content: "";
    position: absolute;
    top: 50%;
    right: -24px;
    margin-top: -12px;
    border: 12px solid transparent;
    border-left: 12px solid #FFF;
    z-index: 2;
  }
  .balloon2-right:after {
    content: "";
    position: absolute;
    top: 50%;
    right: -30px;
    margin-top: -14px;
    border: 14px solid transparent;
    border-left: 14px solid #555;
    z-index: 1;
  }
  .balloon2-right p {
    margin: 0;
    padding: 0;
  }


/* 丸いタイプ */
  .balloon3 {
    position: relative;
    display: inline-block;
    margin: 1.5em 0;
    padding: 0 5px;
    width: 90px;
    height: 90px;
    line-height: 90px;
    text-align: center;
    color: #FFF;
    font-size: 20px;
    font-weight: bold;
    background: #70a6ff;
    border-radius: 50%;
    box-sizing: border-box;
  }
  .balloon3:before {
    content: "";
    position: absolute;
    bottom: -25px;
    left: 50%;
    margin-left: -15px;
    border: 15px solid transparent;
    border-top: 15px solid #70a6ff;
    z-index: 0;
  }

  .balloon3-right {
    position: relative;
    display: inline-block;
    margin: 0 20px;
    padding: 0 5px;
    width: 80px;
    height: 80px;
    line-height: 80px;
    text-align: center;
    color: #FFF;
    font-size: 100%;
    font-weight: bold;
    background: #ff8e9d;
    border-radius: 50%;
    box-sizing: border-box;
  }
  .balloon3-right:before {
    content: "";
    position: absolute;
    top: 50%;
    right: -25px;
    margin-top: -15px;
    border: 15px solid transparent;
    border-left: 15px solid #ff8e9d;
    z-index: 0;
  }


/*===============================================
画面の横幅が601px以上（パソコン用）
===============================================*/
@media print,screen and (min-width: 601px){


    .fukidasiSPC_orange {
        position: relative;
        display: inline-block;
        margin: 0 20px;
        padding: 0 5px;
        width: 80px;
        height: 80px;
        line-height: 80px;
        text-align: center;
        color: #FFF;
        font-size: 100%;
        font-weight: bold;
        background: #e97a7a;
        border-radius: 50%;
        box-sizing: border-box;
      }
      .fukidasiSPC_orange:before {
        content: "";
        position: absolute;
        top: 50%;
        right: -25px;
        margin-top: -15px;
        border: 15px solid transparent;
        border-left: 15px solid #e97a7a;
        z-index: 0;
      }

      .fukidasiSPC_cyan {
        position: relative;
        display: inline-block;
        margin: 0 20px;
        padding: 0 5px;
        width: 80px;
        height: 80px;
        line-height: 80px;
        text-align: center;
        color: #FFF;
        font-size: 100%;
        font-weight: bold;
        background: #7aaee9;
        border-radius: 50%;
        box-sizing: border-box;
      }
      .fukidasiSPC_cyan:before {
        content: "";
        position: absolute;
        top: 50%;
        right: -25px;
        margin-top: -15px;
        border: 15px solid transparent;
        border-left: 15px solid #7aaee9;
        z-index: 0;
      }


}


/*===============================================
画面の横幅が600pxまで（スマホ用）
===============================================*/
@media screen and (max-width:600px){

    .fukidasiSPC_orange {
        position: relative;
        display: inline-block;
        margin: 2% 0 10% 0;
        padding: 7px 10px;
        min-width: 120px;
        max-width: 100%;
        color: #FFF;
        font-size: 16px;
        background: #e97a7a;
        border-radius: 15px;
        text-align: center;
      }
      .fukidasiSPC_orange:before {
        content: "";
        position: absolute;
        top: 100%;
        left: 50%;
        margin-left: -15px;
        border: 15px solid transparent;
        border-top: 10px solid #e97a7a;
      }

      .fukidasiSPC_cyan {
        position: relative;
        display: inline-block;
        margin: 2% 0 10% 0;
        padding: 7px 10px;
        min-width: 120px;
        max-width: 100%;
        color: #FFF;
        font-size: 16px;
        background: #7aaee9;
        border-radius: 15px;
        text-align: center;
      }
      .fukidasiSPC_cyan:before {
        content: "";
        position: absolute;
        top: 100%;
        left: 50%;
        margin-left: -15px;
        border: 15px solid transparent;
        border-top: 10px solid #7aaee9;
      }

}