/* =========================================================
   sections/problem.css — お悩み（Figma フレーム "probrem" / 1440×885）
   【C-2：背景画像あり・absolute 解体 → 通常フロー／2層構造＋レスポンシブ】
   - 旧構造は .problem__bg が高さを規定し、title/cards/appeal が absolute+% の重なり。
     これを解体し、内側 .problem__inner の縦積み(flex column)へ。位置の top/left/% は撤去。
   - 背景画像は「外側に全幅で敷く」方式：.problem__bg を absolute inset:0 / object-fit:cover。
     高さは内側コンテンツ依存になり、bg がその後ろを覆う。
   - .marker（黄グラデのハイライト）は装飾なので維持。
   - 2層：外側 .problem=全幅背景 / 内側 .problem__inner=max1440中央寄せ＋cqw基準。
   - BP：PC ≥1024 / タブレット 768–1023 / SP ≤767（最小375）。生px禁止・トークン/%参照。
     @media 条件式は var() 不可のため px 直書き＋トークン名（--bp-*）をコメント併記。
   ========================================================= */

/* ---- 外側：全幅の背景レイヤー ---- */
.problem {
  position: relative;               /* .problem__bg の配置基準 */
  background: var(--color-cream);   /* 画像外・読込前の地色 */
  overflow: hidden;
}
/* 背景（Figma: probrem_bg）を全幅で敷く。高さは内側コンテンツに追従し cover で覆う */
.problem__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* ---- 内側：中央寄せコンテンツ（bg より前面・cqw の基準） ---- */
.problem__inner {
  position: relative;
  z-index: 1;
  container-type: inline-size;
  width: 100%;
  max-width: var(--container-max);  /* 1440px */
  margin-inline: auto;
  padding-block: var(--space-72) var(--space-88); /* 上70 / 下84 相当 */
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ---- セクションタイトル ---- */
.problem__title {
  margin: 0;
  font-weight: 700;
  font-size: var(--fs-xl);      /* 42px */
  line-height: 4.444cqw;        /* 64px（PC の2行行間）。狭幅では @media で通常値に */
  text-align: center;
  color: var(--color-text);
  white-space: nowrap;
}
/* 「非効率」のマーカー（黄色帯の蛍光ペン風ハイライト・装飾） */
.problem__title .marker {
  background: linear-gradient(
    to top,
    transparent 0.139cqw,
    var(--color-primary) 0.139cqw,
    var(--color-primary) 1.736cqw,
    transparent 1.736cqw
  );
}

/* ---- 3 つの悩みカード（既に flex row） ---- */
.problem__cards {
  margin-top: var(--space-56);  /* title→cards（旧≈52px） */
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-end;        /* アイコン高さが違うため下揃え（SPで center に） */
  gap: var(--space-88);         /* 91px */
}

.problem__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-40);         /* 41px */
}

.problem__card-icon {
  width: auto;
  height: auto;
  display: block;
}
.problem__card-icon--excel  { width: 12.083cqw; }  /* 174px */
.problem__card-icon--people { width: 10.208cqw; }  /* 147px */
.problem__card-icon--cost   { width: 13.333cqw; }  /* 192px */

.problem__card-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-24);        /* 24px */
}
.problem__card-title {
  margin: 0;
  font-weight: 700;
  font-size: var(--fs-base);    /* 24px */
  line-height: 1;
  color: var(--color-text);
  white-space: nowrap;
}
.problem__card-desc {
  margin: 0;
  font-weight: 400;
  font-size: var(--fs-sm);      /* 16px */
  line-height: 1.55;
  text-align: center;
  color: var(--color-text);
}

/* ---- 下部アピール ---- */
.problem__appeal {
  margin-top: calc(var(--space-88) + var(--space-16)); /* cards→appeal 88+16=104px（上余白+16） */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-16);
}
.problem__appeal-lead {
  margin: 0;
  font-weight: 700;
  font-size: var(--fs-xl);      /* 42px */
  line-height: 1;
  color: var(--color-text);
  white-space: nowrap;
}
.problem__appeal-main {
  margin: 0;
  display: flex;
  align-items: baseline;
  justify-content: center;
  font-weight: 700;
  font-size: var(--fs-xl);      /* 42px */
  line-height: 1;
  color: var(--color-text);
  white-space: nowrap;
}
/* 「AI Start Partner」Arial Bold Italic / 黄 / 73.351px */
.problem__appeal-brand {
  font-family: Arial, "Helvetica Neue", sans-serif;
  font-weight: 700;
  font-style: italic;
  font-size: var(--fs-4xl);     /* 73.351px */
  color: var(--color-primary);
}

/* =========================================================
   レスポンシブ（solution / price と同じ型）
   ※ @media は var() 不可のため px 直書き＋トークン名をコメント併記。
   ========================================================= */

/* ---- タブレット以下（<1024＝--bp-tablet 未満）：nowrap見出しの折返し等 ---- */
@media (max-width: 1023px) {
  .problem__title      { white-space: normal; line-height: 1.4; } /* cqw行間をやめる */
  .problem__card-title { white-space: normal; }
  .problem__appeal-main { flex-wrap: wrap; }   /* brand+文言が入り切らない時に折返し */
}

/* ---- タブレット（768–1023＝--bp-sp 〜 --bp-tablet 未満）：3列維持のまま詰める ---- */
@media (min-width: 768px) and (max-width: 1023px) {
  .problem__cards { width: 92%; gap: var(--space-32); }
  .problem__card  { min-width: 0; }             /* flex 子が縮めるように */
}

/* ---- SP（≤767＝--bp-sp 未満）：3カードを縦積み（最小375） ---- */
@media (max-width: 767px) {
  .problem__inner { padding-inline: var(--container-pad); padding-block: var(--space-64); } /* 画面端ガター16px＋SP標準 上下64px */

  .problem__title { font-size: var(--fs-28); }  /* SP標準セクションタイトル28px（旧32） */

  /* 3カード → 縦積み */
  .problem__cards {
    flex-direction: column;
    align-items: center;          /* 下揃え(flex-end)は縦積みで不要 */
    margin-top: var(--space-40);
    gap: var(--space-40);
  }
  .problem__card { width: 100%; gap: var(--space-16); }
  /* カード内：見出し→説明文 24→8（基底95行の gap:24 を SPのみ上書き） */
  .problem__card-text { gap: var(--space-8); }

  /* アイコンは cqw だと極小になるため card 幅に対する % で調整（相対サイズも維持） */
  .problem__card-icon--excel  { width: 40%; }   /* 174px 相当 */
  .problem__card-icon--people { width: 34%; }   /* 147px 相当 */
  .problem__card-icon--cost   { width: 44%; }   /* 192px 相当 */

  /* アピール：折返し＋全パーツ28pxに統一（はみ出し解消。brandの黄・イタリックは維持） */
  /* 3行の行間を均等化：container gap（1↔2行）と appeal-main の折返し row-gap（2↔3行）を
     同じ --space-8 に揃える（従来は 16px と 0px で不均等だった）。 */
  .problem__appeal       { margin-top: var(--space-56); width: 100%; gap: var(--space-16); } /* 1↔2行：16で統一 */
  .problem__appeal-lead  { font-size: var(--fs-28); white-space: normal; } /* 42→28 */
  .problem__appeal-main  { font-size: var(--fs-28); white-space: normal; row-gap: var(--space-16); } /* 42→28／2↔3行：0→16 */
  .problem__appeal-brand { font-size: var(--fs-lg); }                      /* AI Start Partner のみ1段上げ 28→32（色/style維持） */
}

/* ---- PC（≥1024＝--bp-tablet 以上）のみ：cards→appeal 余白をさらに拡大 ---- */
@media (min-width: 1024px) {
  /* 設計基準88+32=120px（--space-120）。タブレットは base の104のまま／SPは56のまま */
  .problem__appeal { margin-top: var(--space-120); }
  /* 「AI Start Partner」（イタリック）の右に8px余白（続く文言との詰まり解消） */
  .problem__appeal-brand { margin-right: var(--space-8); }
}

/* ---- 狭いPC（1024–1370）：problem 専用ブロック【新規追加：1440デザインの比例縮小】 ----
   固定px を cqw（.problem__inner=container-type:inline-size 基準／inner padding-inline 無し→W=1370px, 1cqw=13.70px, ÷13.70）に換算。
   1370で現行px一致（1370/1371段差なし）→1024へ比例縮小。white-space未指定＝基底nowrap維持＝折返しゼロ。
   ★min-1024〜max-1370 のため ≥1371/タブレット/SP には非適用。既存cqw/%（title marker・card-icon--*・title line-height 等）は基底のまま比例追従。
   ★appeal margin-top(120)・brand margin-right(8) は上の min-1024 での実効値を換算。inner の縦padding(コンテナ自身)は据え置き。 */
@media (min-width: 1024px) and (max-width: 1370px) {
  .problem__title        { font-size: 3.066cqw; }              /* 42 */
  .problem__cards        { margin-top: 4.088cqw; gap: 6.423cqw; } /* 56 / 88 */
  .problem__card         { gap: 2.920cqw; }                    /* 40 */
  .problem__card-text    { gap: 1.752cqw; }                    /* 24 */
  .problem__card-title   { font-size: 1.752cqw; }              /* 24 */
  .problem__card-desc    { font-size: 1.168cqw; }              /* 16 */
  .problem__appeal       { margin-top: 8.759cqw; gap: 1.168cqw; } /* 120(min-1024実効) / 16 */
  .problem__appeal-lead  { font-size: 3.066cqw; }              /* 42 */
  .problem__appeal-main  { font-size: 3.066cqw; }              /* 42 */
  .problem__appeal-brand { font-size: 5.255cqw; margin-right: 0.584cqw; } /* 72 / 8(min-1024実効) */
}