/* =========================================================
   トップページ：「ネットショップ、私には無理かも」（お悩み）
   PC … 吹き出し2つ｜男女イラスト｜吹き出し2つ
   1100px 以下 … 上段：吹き出し＋女性 / 下段：男性＋吹き出し
   ========================================================= */
.worry {
  background: var(--bg-2);
  padding: var(--section-pt) var(--gutter);
}
.worry__head { text-align: center; margin-bottom: 13px; }
.worry__title {
  font-family: "Zen Maru Gothic", "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: clamp(22px, 2.22vw, 32px);
  line-height: 2;
  color: var(--main);
}
.worry__sub { font-size: clamp(16px, 1.39vw, 20px); font-weight: 700; line-height: 2; }

.worry__body {
  display: flex;
  align-items: center;
  gap: 14px;
}
.worry__col {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 33px;
}
/* Figma：オートレイアウト 幅351×高さ121 / パディング 左右67px・上下33px / 中央揃え */
.worry__item {
  position: relative;
  min-height: 121px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 33px 67px;
}
/* 左列（しっぽが右向き）は Figma 通り左揃え */
.worry__col:not(.worry__col--right) .worry__item {
  justify-content: flex-start;
  text-align: left;
}
.worry__item p {
  position: relative;
  z-index: 1;
  white-space: nowrap;
  font-family: "Zen Maru Gothic", "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: clamp(15px, 1.39vw, 20px);
  line-height: 1.4;
  color: var(--main);
}
.worry__bubble {
  position: absolute;
  left: -2.29%;
  top: -3.31%;
  width: 104.58%;
  height: 113.23%;
}
/* 180°回転すると影用の余白（下側9.92%）が上側に移り、吹き出し本体が約8px下にずれる。
   回転後に本体が枠とぴったり重なるよう、上の余白を 9.92% にする */
.worry__bubble--flip { top: -9.92%; transform: rotate(180deg); }

.worry__illust {
  flex: 0 0 406px;
  width: 406px;
  aspect-ratio: 406 / 350;
}
.worry__illust > img {
  width: 145.32%;
  height: 238.38%;
  left: -23.02%;
  top: -61.91%;
}

/* スマホ用の人物切り出し（PC では非表示）。
   上のイラストと同じ画像を、女性・男性それぞれの範囲だけ見えるように配置 */
.worry__person { display: none; }
.worry__person--woman { aspect-ratio: 136 / 278; }
.worry__person--woman > img { width: 433.8%; height: 300.1%; left: -95.19%; top: -90.18%; }
.worry__person--man { aspect-ratio: 187 / 282; }
.worry__person--man > img { width: 315.5%; height: 295.9%; left: -153.72%; top: -86.77%; }

/* ---- Responsive ---- */
@media (max-width: 1100px) {
  /* 3列に並ばない幅では、上段：左の吹き出し＋女性 / 下段：男性＋右の吹き出し に組み替える */
  .worry__body {
    display: grid;
    grid-template-columns: 35fr 30fr 35fr;
    grid-template-areas:
      "l l w"
      "m r r";
    gap: 40px 16px;
    align-items: center;
    max-width: 760px;
    margin-inline: auto;
  }
  .worry__col { grid-area: l; }
  .worry__col--right { grid-area: r; }
  /* 上段の吹き出しも下段と同じく中央揃え（PCは Figma 通り左揃えのまま）。
     吹き出し画像はしっぽ・影の分だけ白い本体が枠より狭いので、しっぽ側の余白を足して本体の中央に置く
     （上段：本体は枠の左 約89%、下段：本体は枠の中央よりわずかに右） */
  .worry__item { --pad: clamp(24px, 5vw, 67px); padding-inline: var(--pad); }
  .worry__col:not(.worry__col--right) .worry__item {
    justify-content: center;
    text-align: center;
    padding-right: calc(var(--pad) + 10.6%);
  }
  .worry__col--right .worry__item { padding-left: calc(var(--pad) + 1.4%); }
  .worry__illust { display: none; }
  .worry__person { display: block; width: 100%; }
  .worry__person--woman { grid-area: w; width: 80%; justify-self: center; }
  .worry__person--man { grid-area: m; }
}

@media (max-width: 768px) {
  .worry__body { gap: 32px 8px; }
  .worry__col { gap: 20px; }
  .worry__item { --pad: 18px; padding-block: 22px; min-height: 96px; }
  .worry__item p { white-space: normal; }
}

@media (max-width: 560px) {
  /* 「「ネットショップ、私には無理かも…」」を1行に収める。
     22px のときの行幅が文字サイズの約 17.9 倍なので、画面幅から逆算して文字を詰める */
  .worry__title { font-size: clamp(15px, calc((100vw - 58px) / 17.9), 22px); }
}