@charset "UTF-8";

/*吹き出し*/
.talk figure img {
    width: 100%;
    height: 100%;
    border: 2px solid ; /* 円の線の太さと色の設定 */
    border-radius: 50%;
    margin: 0;
  }

.speechBubble {
  position: relative;
  display: inline-block;
  margin-right: 20px;
  padding: 20px;
  border: 2px solid #000000;
  border-radius: 20px;
  background-color: #ffffff;
  line-height: 1.5;
  color: #000000;
  height: 100%;
  width: 70%;
  }

.speechBubble::before {
  content: "";
  position: absolute;
  top: 70%;
  right: 0;
  border-style: solid;
  border-width: 0 0 10px 20px;
  border-color: transparent transparent transparent #000000;
  translate: 100% -50%;
}

.speechBubble::after {
  content: "";
  position: absolute;
  top: 70%;
  right: 0;
  border-style: solid;
  border-width: 0 0 5.8px 11.5px;
  border-color: transparent transparent transparent #ffffff;
  translate: 100% calc(-50% - 0.1px);
}

.speechBubble_2 {
  position: relative;
  display: inline-block;
  padding: 20px;
  border: 2px solid #000000;
  border-radius: 20px;
  background-color: #ffffff;
  line-height: 1.5;
  color: #000000;
  height: 100%;
  width: 70%;
  }

.speechBubble_2::before {
  content: "";
  position: absolute;
  top: 0;
  left: 30%;
  border-style: solid;
  border-width: 0 35px 35px 0;
  border-color: transparent transparent  #000000;
  translate: -50% -100%;
  transform: skew(40deg);
  transform-origin: bottom;
}

.speechBubble_2::after {
  content: "";
  position: absolute;
  top: 0;
  left: 30%;
  border-style: solid;
  border-width: 0 30.2px 30.2px 0;
  border-color: transparent transparent  #ffffff;
  translate: calc(-50% - 0.4px) -100%;
  transform: skew(40deg);
  transform-origin: bottom;
}

.speechBubble_3 {
  position: relative;
  display: inline-block;
  margin-left: 20px;
  padding: 20px;
  border: 2px solid #000000;
  border-radius: 20px;
  background-color: #ffffff;
  line-height: 1.5;
  color: #000000;
  height: 100%;
  width: 70%;
  }

.speechBubble_3::before {
  content: "";
  position: absolute;
  top: 70%;
  left: 0;
  border-style: solid;
  border-width: 10px 20px 0 0;
  border-color: transparent #000000 transparent transparent ;
  translate: -100% -50%;
}

.speechBubble_3::after {
  content: "";
  position: absolute;
  top: 70%;
  left: 0;
  border-style: solid;
  border-width: 5.8px 11.5px 0 0;
  border-color: transparent #ffffff transparent transparent ;
  translate: -100% calc(-50% + 0.1px);
}



/* PC */
@media screen and (min-width: 1100px) {
.talk-img {
margin-right: 4px;
margin-top: -1px;
float: right;
width: 200px;
height: 200px;
}
}
/* sp用 */
@media screen and (max-width: 1099px) {
.talk-img {
margin-right: 4px;
margin-top: -1px;
float: right;
width: 170px;
height: 170px;
}
}