/* =========================================================
   sections/example.css — 導入事例（Figma フレーム "example" / 1440×1831）
   【C-2：背景画像あり・absolute 解体 → 通常フロー／2層構造＋レスポンシブ】
   - 旧構造は .example__bg が高さを規定し、title/title-bar/deco/grid が absolute+%。
     これを解体し、内側 .example__inner の縦積み(flex column)へ。top/left/% は撤去。
   - 背景画像（白＋薄い装飾パターン）は「外側に全幅で敷く」：absolute inset:0 / cover。
   - .example__title-bar（縞帯）と .example__deco（"Cases"）は見出しの装飾。after 同様
     .example__title を relative 親にして内包：縞帯は文字幅追従＋z-index:-1、
     deco は見出し上に薄く重ねる（z-index:-2）。重なり装飾は例外として absolute 維持。
   - 2層：外側 .example=全幅背景 / 内側 .example__inner=max1440中央寄せ＋cqw基準。
   - BP：PC ≥1024 / タブレット 768–1023 / SP ≤767（最小375）。生px禁止・トークン/%参照。
     @media 条件式は var() 不可のため px 直書き＋トークン名（--bp-*）をコメント併記。
   ========================================================= */

/* ---- 外側：全幅の背景レイヤー ---- */
.example {
  position: relative;               /* .example__bg の配置基準 */
  background: var(--color-white);   /* 画像外・読込前の地色 */
  overflow: hidden;
}
.example__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* ---- 内側：中央寄せコンテンツ（bg より前面・cqw の基準） ---- */
.example__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-96) var(--space-72); /* 上99 / 下 相当 */
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ---- セクションタイトル（縞帯・deco を内包する relative 親） ---- */
.example__title {
  position: relative;               /* 装飾の基準＋スタッキング文脈 */
  z-index: 1;
  margin: 0;
  font-weight: 700;
  font-size: var(--fs-xl);          /* 42px */
  line-height: 1;
  text-align: center;
  color: var(--color-text);
  white-space: nowrap;
}
.example__title .num {
  font-size: var(--fs-4xl);         /* 72px（強調） */
}
/* 縞帯（見出し下部の背面装飾）。文字幅に追従・下端・文字の背後 */
.example__title-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.8cqw;                  /* 文字下端より下へはみ出す（solution/afterと同値） */
  height: 2cqw;                     /* 太い帯（solution/afterと同値・≈29px） */
  z-index: -1;
  background: repeating-linear-gradient(
    -45deg,
    var(--color-stripe) 0,           /* #F9DA60・solution/afterと統一 */
    var(--color-stripe) 0.54cqw,     /* 線を太く（密度1/3） */
    transparent 0.54cqw,
    transparent 1.47cqw
  );
  pointer-events: none;
}
/* 装飾「Cases」Arial Bold Italic / 薄黄。見出し上に薄く重ねる（最背面） */
.example__deco {
  position: absolute;
  top: -1.6cqw;                      /* 40拡大で見出しが下がった分、Casesを下げて上端に軽く重ねる */
  left: 50%;
  transform: translateX(-50%);
  z-index: -2;
  font-family: Arial, "Helvetica Neue", sans-serif;
  font-weight: 700;
  font-style: italic;
  font-size: var(--fs-4xl);         /* 70px */
  line-height: 1;
  color: rgba(252, 203, 12, 0.2);
  white-space: nowrap;
  pointer-events: none;
}

/* ---- カードグリッド（中身の flex：2行×2カードは維持） ---- */
.example__grid {
  margin-top: var(--space-96);      /* title→grid（旧≈135px） */
  width: 86.042%;                   /* 旧グリッド幅を % で踏襲 */
  display: flex;
  flex-direction: column;
  gap: var(--space-72);             /* 72px */
}
.example__row {
  display: flex;
  flex-direction: row;
  gap: var(--space-64);             /* 65px */
  align-items: stretch;
}

/* カード（Figma: box）587×696 / radius31 / cream */
.example__card {
  flex: 1 1 0;
  min-height: 48.333cqw;            /* 696px */
  border-radius: 2.153cqw;          /* 31px */
  background: var(--color-cream);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: var(--space-64);  /* 66px */
}
/* 画像（Figma: Mask group）高さ330・上角丸・背面グレー */
.example__card-img {
  width: 100%;
  height: 22.917cqw;                /* 330px */
  object-fit: cover;
  background: var(--color-gray-photo); /* rgb(94,94,94) 画像読込前のプレースホルダ */
  flex-shrink: 0;
}

.example__card-body {
  width: 36.042cqw;                 /* 519px */
  padding: var(--space-8);          /* 10px */
  margin-top: var(--space-56);      /* gap 58px（画像との間） */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-24);             /* 23px */
}
.example__card-title {
  margin: 0;
  font-family: "Yu Gothic", "YuGothic", "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: var(--fs-xl);          /* 48px */
  line-height: 1.2;                 /* 57.6px */
  text-align: center;
  color: var(--color-text);
  white-space: nowrap;
}
.example__card-desc {
  margin: 0;
  width: 29.722cqw;                 /* 428px */
  font-family: "Yu Gothic", "YuGothic", "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: var(--fs-lg);          /* 36px */
  line-height: 1.3;                 /* 46.8px */
  color: var(--color-text);
}

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

/* ---- タブレット以下（<1024＝--bp-tablet 未満）：nowrap 見出しの折返し ---- */
@media (max-width: 1023px) {
  .example__title      { white-space: normal; }
  .example__card-title { white-space: normal; }
}

/* ---- タブレット（768–1023）：2カラム維持のまま詰める ---- */
@media (min-width: 768px) and (max-width: 1023px) {
  .example__grid { width: 94%; }
  .example__row  { gap: var(--space-32); }
  .example__card { min-width: 0; }              /* flex 子が縮めるように */
}

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

  .example__title     { font-size: var(--fs-lg); line-height: 1.3; } /* 42→32・3行の行間を広げる（solution/afterと同値） */
  /* SP見出し：読点「、」を非表示＋SP改行3行（.sp-only 改行はグローバル定義を流用） */
  .sp-hide { display: none; }
  .example__title .num { font-size: var(--fs-xl); } /* 56→42 */

  /* 見出し縞：SPは全幅・下端一直線の帯(.example__title-bar)をやめ、3行それぞれの
     文字幅内・下半分に同じ縞下線を付ける（solution/after の em と同一設定）。 */
  .example__title-bar { display: none; }
  .example__title-em {
    background-image: repeating-linear-gradient(
      -45deg,
      var(--color-stripe) 0,
      var(--color-stripe) 0.8cqw,       /* 線の太さ（solution/afterと同一） */
      transparent 0.8cqw,
      transparent 2cqw                  /* 1周期（solution/afterと同一） */
    );
    background-repeat: no-repeat;
    background-position: left bottom;    /* 下端に寄せる */
    background-size: 100% var(--space-24); /* 文字幅×下半分（solution/afterと同一） */
  }
  /* 「Cases」を上へ。見出しに少し被りつつ上端で見切れない位置に（SP：deco56px、top -40px。実機で微調整可） */
  .example__deco      { font-size: var(--fs-2xl); top: calc(-1 * var(--space-32)); } /* 72→56 / top -40→-32（8px下げ） */

  /* グリッドを全幅、各行を縦積み（2カード→縦） */
  .example__grid { width: 100%; gap: var(--space-40); margin-top: var(--space-40); } /* 見出し↔カード 40（旧48）。gap=行間は不変 */
  .example__row  { flex-direction: column; gap: var(--space-40); }

  /* カード：1列全幅・高さはコンテンツ依存に */
  .example__card {
    flex: none;
    width: 100%;
    min-height: auto;
    padding-bottom: var(--space-24);  /* カード下padding 32→24（上・左右は不変） */
  }
  .example__card-img  { height: auto; }             /* cqw固定高をやめ画像本来の比率で */
  .example__card-body {
    width: 88%;
    margin-top: var(--space-24);
    gap: var(--space-16);           /* 見出し→説明文 24→16（基底136行の gap:24 を上書き。全カード共通） */
  }
  .example__card-title { font-size: var(--fs-lg); } /* 42→32 */
  .example__card-desc  {
    width: 100%;
    font-size: var(--fs-base);                      /* 32→24 */
    text-align: center;
  }
}

/* ---- 狭いPC（1024–1370）：example 専用ブロック【新規追加：1440デザインの比例縮小】 ----
   固定px を cqw（.example__inner=container-type:inline-size／inner padding-inline無し→W=1370px, 1cqw=13.70px, ÷13.70）に換算。
   1370で現行px一致（段差なし）→1024へ比例縮小。white-space未指定＝基底nowrap維持＝折返しゼロ。
   ★min-1024〜max-1370 のため ≥1371/タブレット/SP には非適用。既存cqw/%（card min-height/radius・card-img高さ・card-body/desc幅・grid幅% 等）は基底のまま比例追従。
   ★font は token 実値で換算（--fs-xl=42 / --fs-lg=32 / --fs-4xl=72。コメントの48/36はFigma値）。 */
@media (min-width: 1024px) and (max-width: 1370px) {
  .example__title      { font-size: 3.066cqw; }             /* 42 */
  .example__title .num { font-size: 5.255cqw; }             /* 72 */
  .example__deco       { font-size: 5.255cqw; }             /* 72 */
  .example__grid       { margin-top: 7.007cqw; gap: 5.255cqw; } /* 96 / 72 */
  .example__row        { gap: 4.672cqw; }                   /* 64 */
  .example__card       { padding-bottom: 4.672cqw; }        /* 64 */
  .example__card-body  { padding: 0.584cqw; margin-top: 4.088cqw; gap: 1.752cqw; } /* 8 / 56 / 24 */
  .example__card-title { font-size: 3.066cqw; }             /* 42 */
  .example__card-desc  { font-size: 2.336cqw; }             /* 32 */
}