/* ページ固有: 特長（REASON左右交互）・メリット罫線リスト・約束の白カード */

/* 約束の橋渡し: 白カード＋NEXTカードの縦積み（gap:32px） */
.promise-card { max-width: 720px; margin: 0 auto; background: #fff; border-radius: 16px; padding: 40px 48px; box-shadow: var(--card-sh); text-align: center; }
.promise-card + .nextcard { margin: 32px auto 0; }
@media (max-width: 749px) {
  .promise-card { padding: 28px 24px; }
}

/* v23（2026-08-09 恒久方針適用） */

/* REASON 01〜04: 左右交互の大セクション行。区切りはカードでなく余白 */
.reason-rows { margin-top: 88px; display: grid; grid-template-columns: 1fr; gap: 128px; }
.reason.cols { gap: 88px; }
.reason .col-text { max-width: 46em; }

/* 英字キッカー: --font-num・青・letter-spacing広め */
.r-kicker { display: block; font-family: var(--font-num); font-size: 14px; font-weight: 700; color: var(--kg-blue); letter-spacing: .3em; line-height: 1; }

.r-t { font-size: clamp(22px, 2.4vw, 28px); font-weight: 700; color: var(--kg-ink); line-height: 1.65; margin-top: 20px; letter-spacing: .03em; }
.r-catch { font-size: 16.5px; font-weight: 700; color: var(--kg-deep); margin-top: 16px; line-height: 1.9; }
.r-d { font-size: 15.5px; margin-top: 14px; line-height: 1.95; text-wrap: pretty; }
.r-link { margin-top: 24px; }

/* 図解側: 淡青ベッドの上に既存イラスト（カードではなく台座） */
.img-bed { background: var(--kg-t1); border-radius: 24px; padding: 24px; }
.img-bed img { display: block; width: 100%; height: auto; }

/* MERIT: 白カード連続をやめ、罫線リスト（1px区切り）に緩める */
.merit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 72px; margin-top: 48px; }
.merit-card { background: transparent; border-radius: 0; box-shadow: none; padding: 34px 0 38px; border-top: 1px solid var(--kg-line); }
.merit-no { font-family: var(--font-num); font-size: 12px; font-weight: 700; color: var(--kg-blue); letter-spacing: .22em; }
.merit-no b { font-size: 22px; margin-left: 8px; letter-spacing: .04em; }
.merit-t { font-size: 18px; font-weight: 700; color: var(--kg-ink); margin-top: 10px; line-height: 1.7; }
.merit-d { font-size: 14.5px; margin-top: 12px; line-height: 2.0; text-wrap: pretty; }

/* SP */
@media (max-width: 749px) {
  .reason-rows { margin-top: 56px; gap: 72px; }
  .reason.cols { gap: 28px; }
  .r-t { margin-top: 14px; }
  .merit-grid { grid-template-columns: 1fr; gap: 0; margin-top: 36px; }
  .merit-card { padding: 28px 0 30px; }
}

/* ============================================================
   v25（2026-08-10 さき指示）: タブレット帯（750〜1023px）
   2列は保つが、PC用の広すぎるgapで各列が痩せていたため詰める（追記のみ）
   ============================================================ */
@media (min-width: 750px) and (max-width: 1023px) {
  /* REASON: 章間128px → 96px（縦に間延びして1画面に文脈が入らなかった） */
  .reason-rows { margin-top: 64px; gap: 96px; }
  /* 左右2列は維持。gap 88px → 56px（≒2/3）で本文列を約324pxまで戻す */
  .reason.cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; }

  /* MERIT: 2列のまま、列間72px → 40px */
  .merit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; margin-top: 40px; }
}

/* v25: タブレット・SP共通（タップ領域） */
@media (max-width: 1023px) {
  /* テキストリンクのタップ領域を30px→38pxへ（高さ直指定は避けpaddingで確保） */
  .tlink { padding-top: 4px; padding-bottom: 4px; }
}

/* ============================================================
   v28（2026-08-10 デザインレビュー対応）
   ① REASONのイラストをPCで拡大（1.15〜1.2倍）
   ② REASON 01〜04を背景の薄い大数字＋キッカー微増
   ③ MERIT（導入による4つの変化）に大きな数字（カード化はしない）
   ④ POLICYの白カード左に4pxのブルーライン
   ⑤ REASON 04の点線ボックスは意図的に現状維持（表現の抑揚のため）
   ⑥ タブレット帯のREASON 2カラムはv25のまま維持（実測 830px = 359px×2）
   数字はHTMLに文言を足さずCSSカウンタで出す（文言不変のルールを守るため）
   ============================================================ */

/* ① PC: 図版列だけ 1 : 1.15 に振り、イラストの実寸を約1.17倍にする
   （.cols--rev は order で左右が入れ替わるので、列比も左右反転させる） */
@media (min-width: 1024px) {
  .reason.cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
  .reason.cols--rev { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
  /* mono.css の .col-visual img { max-width: 400px } を淡青ベッド幅まで解放 */
  .reason .col-visual img { max-width: 100%; }
}

/* ② REASON 01〜04: 背景に薄い大数字（カード・アイコンは足さない） */
.reason-rows { counter-reset: reason; }
.reason { counter-increment: reason; }
.reason .col-text { position: relative; }
.reason .col-text::before {
  content: counter(reason, decimal-leading-zero);
  position: absolute; top: -58px; left: -10px; z-index: 0;
  font-family: var(--font-num); font-size: 104px; font-weight: 700;
  line-height: 1; letter-spacing: .02em; color: rgba(22, 104, 220, .11);
  pointer-events: none; user-select: none;
}
.reason .r-kicker,
.reason .r-t,
.reason .r-catch,
.reason .r-d,
.reason .r-link { position: relative; z-index: 1; }
/* 英字キッカーも少しだけ大きく（14px → 15px） */
.reason .r-kicker { font-size: 15px; }

/* ③ MERIT: 白カードに戻さず、罫線リストのまま各ブロックに大きな数字を置く */
.merit-grid { counter-reset: merit; }
.merit-card { position: relative; counter-increment: merit; padding-top: 68px; }
.merit-card::before {
  content: counter(merit, decimal-leading-zero);
  position: absolute; top: 12px; left: 0; z-index: 0;
  font-family: var(--font-num); font-size: 64px; font-weight: 800;
  line-height: 1; letter-spacing: .02em; color: rgba(22, 104, 220, .11);
  pointer-events: none; user-select: none;
}
.merit-no,
.merit-t,
.merit-d { position: relative; z-index: 1; }

/* ④ POLICY: 白カードの左に4pxのブルーライン（3つの方針を「約束」として締める） */
.oklist { position: relative; overflow: hidden; }
.oklist::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0;
  width: 4px; background: var(--kg-blue);
}

/* v28 タブレット帯（750〜1023px）: 2カラムは維持のまま、数字だけ縮める */
@media (min-width: 750px) and (max-width: 1023px) {
  .reason .col-text::before { font-size: 88px; top: -48px; left: -8px; }
  .merit-card { padding-top: 62px; }
  .merit-card::before { font-size: 60px; top: 10px; }
}

/* v28 SP */
@media (max-width: 749px) {
  .reason .col-text::before { font-size: 80px; top: -40px; left: -6px; }
  .merit-card { padding: 54px 0 30px; }
  .merit-card::before { font-size: 52px; top: 8px; }
}