.blue-font {
  color: #165b8e !important;
}
.arrow-down {
  display: flex;
  justify-content: center;
  width: 100%;
  height: 4em;
}
.arrow-down::before {
  content: "";
  display: block;
  background-color: #f6ab00;
  width: 1.5em;
  height: 2.5em;
  margin-left: 2.5em;
}
.arrow-down::after {
  content: "";
  display: block;
  border: #f6ab00 solid 1.3em;
  border-top: transparent solid 1.3em;
  border-left: transparent solid 1.3em;
  width: 0;
  height: 0;
  position: relative;
  top: 0.5em;
  left: -2em;
  transform: rotate(45deg);
}

.pink-header,
.blue-header {
  display: block;
  position: relative;
  text-align: center;
  border-bottom: 2px solid #000;
  border-radius: calc(1.25em - 2px) calc(1.25em - 2px) 0 0; /* (.bubbleのborder-radius（1em） / フォントサイズ（0.8em）) - border（2px） */
  margin-bottom: 0.5em;
  width: calc(100% + 1.25em);
  margin-left: -0.625em;
}
.pink-header {
  background-color: #fce5de;
}
.blue-header {
  background-color: #b9e3f9;
}
.blue-header::before,
.blue-header::after {
  box-sizing: border-box;
  content: "";
  display: block;
  position: absolute;
  top: -1.1em;
  left: -1.1em;
  width: 2.2em;
  height: 2.2em;
  background: #fff;
  border: 2px solid #000;
  border-radius: 50%;
  clip-path: inset(
    calc(50% - 2px) 0 0 calc(50% - 2px)
  ); /* 線幅分2pxを考慮してクリッピング */
}
.blue-header::after {
  transform: scaleX(-1);
  left: auto;
  right: -1.1em;
}
.bubble {
  border: 2px solid #000;
  border-radius: 1em;
  margin-top: 0.5em !important;
  margin-bottom: 0.5em !important;
  padding: 0 0.5em 0.5em 0.5em !important;
}
.circle-a {
  display: inline-flex;
  width: 1.2em;
  height: 1.2em;
  padding-top: 0.1em;
  border: 0.07em solid #000;
  border-radius: 100%;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  margin-left: 0.2em;
}
.japanese {
  font-size: 0.8em;
}