/* =========================================================
   sections/after.css — 導入後（Figma フレーム "after" / 1440×1113）
   【C-2：背景画像あり・absolute 解体 → 通常フロー／2層構造＋レスポンシブ】
   - 旧構造は .after__bg が高さを規定し、title/title-bar/compare が absolute+%。
     これを解体し、内側 .after__inner の縦積み(flex column)へ。top/left/% は撤去。
   - 背景画像は「外側に全幅で敷く」方式：.after__bg を absolute inset:0 / object-fit:cover。
   - .after__title-bar（縞帯）は見出しの背面装飾なので、.after__title を relative 親にして
     その中に絶対配置で残す（z-index:-1 で文字の背後）。.after__arrow も装飾扱いで維持。
   - 矢印：PC/タブレットは右向き、SP は縦積みに合わせ rotate(90deg) で下向き。
   - 2層：外側 .after=全幅背景 / 内側 .after__inner=max1440中央寄せ＋cqw基準。
   - BP：PC ≥1024 / タブレット 768–1023 / SP ≤767（最小375）。生px禁止・トークン/%参照。
     @media 条件式は var() 不可のため px 直書き＋トークン名（--bp-*）をコメント併記。
   ========================================================= */

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

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

/* ---- セクションタイトル（縞帯 title-bar を内包する relative 親） ---- */
.after__title {
  position: relative;               /* .after__title-bar の基準＋スタッキング文脈 */
  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;
}
/* 縞帯（見出し下部の背面装飾）。文字幅＝h2幅に追従、下端に配置、文字の背後(z-index:-1) */
.after__title-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.8cqw;                  /* 文字下端より下へはみ出す（solutionと同値） */
  height: 2cqw;                     /* 太い帯（solutionと同値・≈29px） */
  z-index: -1;                      /* 文字（前面）の背後に */
  background: repeating-linear-gradient(
    -45deg,
    var(--color-stripe) 0,
    var(--color-stripe) 0.54cqw,    /* 線を太く（密度1/3・solutionと同値） */
    transparent 0.54cqw,
    transparent 1.47cqw
  );
  pointer-events: none;
}

/* ---- 比較レイアウト（中身の flex row は維持） ---- */
.after__compare {
  margin-top: var(--space-96);      /* title→compare（旧≈124px） */
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: var(--space-32);             /* 35px */
}

.after__col {
  display: flex;
  flex-direction: column;
  align-items: center;                /* イラスト・リスト塊を箱の中央に */
  gap: var(--space-40);             /* 40px */
  /* 半分割(flex:1 1 0)だと nowrap の最長行がはみ出すため、
     長い方の内容（AFTER最長行≈547.7px＝38.035cqw@1440）が収まる
     固定幅を両カラム共通で与えて対称にする（実測値） */
  flex: none;
  width: 38.1cqw;                     /* ≈548.6px：最長行がはみ出さない最小幅＋微マージン */
}

/* BEFORE / AFTER ラベル（ピル） */
.after__label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-8) var(--space-32);   /* 10 / 30 */
  border-radius: 999px;
  font-weight: 400;
  font-size: var(--fs-lg);          /* 32px */
  line-height: 1;
  color: var(--color-white);
  white-space: nowrap;
}
.after__label--before { background: var(--color-gray-mid); }
.after__label--after  { background: var(--color-primary); }

/* 人物イラスト */
.after__person { height: auto; }
.after__person--before { width: 22.431cqw; }  /* 323px */
.after__person--after  { width: 21.875cqw; }  /* 315px */

/* 見出し＋リスト */
.after__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-32);             /* 32px */
  align-self: stretch;
}
.after__col-title {
  margin: 0;
  font-weight: 700;
  font-size: var(--fs-xl);          /* 42px */
  line-height: 1;
  text-align: center;
  color: var(--color-text);
  white-space: nowrap;
}

.after__list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-16);             /* 12px */
}
.after__item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-8);              /* 8px */
}
.after__item-icon {
  flex-shrink: 0;
  height: auto;
}
.after__item-icon--x     { width: 2.292cqw; }   /* 33px 枠 */
.after__item-icon--check { width: 1.968cqw; }   /* 28.333px */
.after__item-text {
  font-size: var(--fs-lg);          /* 32px */
  line-height: 1;
  color: var(--color-text);
  white-space: nowrap;
}
.after__item-text--before { font-weight: 400; }
.after__item-text--after  { font-weight: 500; }

/* 中央の矢印（右向き三角。SP で rotate して下向きに） */
.after__arrow {
  flex-shrink: 0;
  width: 3.958cqw;                  /* 57px（回転後の幅） */
  height: auto;
  fill: var(--color-gray-arrow);    /* rgb(217,217,217) */
}

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

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

/* ---- タブレット（768–1023）：2カラム横並び維持のまま詰める ---- */
@media (min-width: 768px) and (max-width: 1023px) {
  .after__compare { width: 96%; gap: var(--space-24); }
  .after__col     { flex: 1 1 0; min-width: 0; } /* 2列で均等に縮める */
}

/* ---- SP（≤767＝--bp-sp 未満）：BEFORE/AFTER を縦積み・矢印を下向きに ---- */
@media (max-width: 767px) {
  .after__inner { padding-inline: var(--container-pad); padding-block: var(--space-64); } /* 画面端ガター16px＋SP標準 上下64px */

  .after__title { font-size: var(--fs-lg); line-height: 1.3; } /* 42→32・2行の行間を広げる（solution mainと同値） */

  /* 見出し縞：SPは全幅・下端一直線の帯(.after__title-bar)をやめ、1・2行目の
     文字幅内・下半分に同じ縞下線を付ける（solution の main-em/em2 と同一設定）。
     ※ .sp-only（改行制御）は solution.css でグローバル定義済みを流用。 */
  .after__title-bar { display: none; }
  .after__title-em,
  .after__title-em2 {
    background-image: repeating-linear-gradient(
      -45deg,
      var(--color-stripe) 0,
      var(--color-stripe) 0.8cqw,       /* 線の太さ（solutionと同一） */
      transparent 0.8cqw,
      transparent 2cqw                  /* 1周期（solutionと同一） */
    );
    background-repeat: no-repeat;
    background-position: left bottom;    /* 下端に寄せる */
    background-size: 100% var(--space-24); /* 文字幅×下半分（solutionと同一） */
  }

  /* 2列を縦積み。DOM順（BEFORE→arrow→AFTER）で矢印が中央に入る */
  .after__compare {
    flex-direction: column;
    gap: var(--space-24);                       /* ④ リスト↔矢印＝24（旧32） */
    margin-top: var(--space-40);                /* 見出し→比較ブロック 96→40（基底76行のmargin-top:96を上書き） */
  }
  .after__col { width: 100%; gap: var(--space-24); }   /* ①バッジ→イラスト / ②イラスト→見出し＝各24（基底40を上書き） */
  .after__content { align-self: center; gap: var(--space-16); } /* ③ 見出し→リスト＝16（基底32を上書き）／リスト塊を中央に */

  /* 矢印：下向きに回転＋サイズを実用値に（cqw だと極小） */
  .after__arrow {
    width: var(--space-40);
    transform: rotate(90deg);
  }

  /* 人物イラスト：cqw だと極小になるため card 幅に対する % で */
  .after__col .after__person { width: 48%; }

  .after__col-title { font-size: var(--fs-base); } /* SP：カラム見出し 24px */
  .after__item-text { font-size: var(--fs-md); }   /* SP：リスト項目 20px */
}

/* ---- 狭いPC（1024–1370）：after 専用ブロック【新規追加：1440デザインの比例縮小】 ----
   固定px を cqw（.after__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/%（col幅38.1cqw・person--*・item-icon--*・arrow・title-bar等）は基底のまま比例追従。border-radius:999px(ラベルのピル)は据え置き。 */
@media (min-width: 1024px) and (max-width: 1370px) {
  .after__title     { font-size: 3.066cqw; }                 /* 42 */
  .after__compare   { margin-top: 7.007cqw; gap: 2.336cqw; } /* 96 / 32 */
  .after__col       { gap: 2.920cqw; }                       /* 40 */
  .after__label     { font-size: 2.336cqw; padding: 0.584cqw 2.336cqw; } /* 32 / 8 32 */
  .after__content   { gap: 2.336cqw; }                       /* 32 */
  .after__col-title { font-size: 3.066cqw; }                 /* 42 */
  .after__list      { gap: 1.168cqw; }                       /* 16 */
  .after__item      { gap: 0.584cqw; }                       /* 8 */
  .after__item-text { font-size: 2.336cqw; }                 /* 32 */
}