/*
 * こどもFA ブロック
 *
 * 表側とブロックエディタの両方で読み込まれる。
 * デザイン: Figma「こどもにQ_03_詳細ページ」の Q4 / Q5
 */

.kodomo-fa {
  display: flex;
  flex-direction: column;
  gap: 17px;
  margin: 0;
  padding: 0;
  list-style: none;

  li {
    display: flex;
    align-items: flex-start;
    gap: 23px;
    margin: 0;
  }

  /* 顔の SVG（いまの気分調査と共通）は 50px の枠に絵を描いているが、Figma の顔は 40px の枠に同じ大きさの絵。
   * 50px で表示して、はみ出す分は負の余白で打ち消す（並びの上では 40px） */
  img {
    flex: none;
    width: 50px;
    height: 50px;
    margin: 0 -5px;
  }

  /* 吹き出し（p にすると本文側の p のスタイルが効いてしまうので div にしている） */
  .balloon {
    position: relative;
    box-sizing: border-box; /* エディタにはサイトのリセットCSSが無いので明示する */
    flex: 1;
    min-width: 0;
    min-height: 51px;
    margin: 0 0 0 15px; /* しっぽの分 */
    padding: 13px 18px;
    border: 1px solid #C9C9C9;
    border-radius: 10px;
    background-color: #fff;
    color: #4A4A4A;
    font-family: 'MFW-PA1GothicStd-Medium', var(--font-yugothic);
    font-size: 14px;
    line-height: 1.6;
    font-feature-settings: "palt" 1;

    /* しっぽ（外側の枠線 → 内側の白で重ねて描く） */
    &::before,
    &::after {
      content: '';
      position: absolute;
      border-style: solid;
      border-color: transparent;
    }
    &::before {
      top: 18px;
      left: -16px;
      border-width: 7px 15px 7px 0;
      border-right-color: #C9C9C9;
    }
    &::after {
      top: 19px;
      left: -14px;
      border-width: 6px 14px 6px 0;
      border-right-color: #fff;
    }
  }
}